Javascript regex replace using object property lookup from match is "undefined"
<p>I am having the following issue while trying to perform a regex substitution:</p>

<p>Here is my string and regex:</p>

<pre><code>var content = "This is the city of {{city}}, located in the county of {{county}} and the state of {{state}}"
content.replace(/\{\{([a-zA-Z0-9]*)\}\}/g, '$1')
</code></pre>

<blockquote>
  <p>"This is the city of city, located in the county of county and the state of state"</p>
</blockquote>

<p>Here is my context object for my regex substitution:</p>

<pre><code>var context = {city: "Abanda", county: "Chambers County", state: "Alabama"}
content.replace(/\{\{([a-zA-Z0-9]*)\}\}/g, context['$1'])
</code></pre>

<blockquote>
  <p>"This is the city of undefined, located in the county of undefined and the state of undefined"</p>
</blockquote>

<p>Why is my regex replace failing with <code>undefined</code>? I am following MDN's docs for regex substitution and matching here: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-capturing-parentheses" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-capturing-parentheses</a></p>

<p>While debugging this issue, I got the following, which highlights that there might be an issue when accessing an object's properties inside of a regex replace method:</p>

<pre><code>content.replace(/\{\{([a-zA-Z0-9]*)\}\}/g, '$1')
</code></pre>

<blockquote>
  <p>"This is the city of city, located in the county of county and the state of state"</p>
</blockquote>

<pre><code>content.replace(/\{\{([a-zA-Z0-9]*)\}\}/g, context)
</code></pre>

<blockquote>
  <p>This is the city of [object Object], located in the county of [object Object] and the state of [object Object]</p>
</blockquote>

<p>Can anyone explain?</p>