title: String is getting added instead of getting replaced
body: <p>I have a string that looks like this:</p>
  <p><code>[TITLE|prefix=pref|suffix=suf] [STORENAME|prefix=s|suffix=s] [DYNAMIC|prefix=x|suffix=y|limit=10|seperator=-|random=1|reverse=1]</code></p>
  <p>I would like to replace the value of <code>prefix</code> of <code>TITLE</code> (which is <code>pref</code>) with <code>my text</code>.</p>
  <p>This is what I have tried so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const string = '[TITLE|prefix=pref|suffix=suf] [STORENAME|prefix=s|suffix=s] [DYNAMIC|prefix=x|suffix=y|limit=10|seperator=-|random=1|reverse=1]';
  
  const search = 'TITLE';
  const replace = 'prefix';
  const value = 'my text';
  
  const regex = new RegExp(`(\\[${search}(?:\\|[^\\][]*)?)]`, 'gi');
  const result = string.replace(regex, `$1|${replace}=${value}]`);
  
  console.log(result);</code></pre>
  </div>
  </div>
  </p>
  <p>As you see, the value of <code>pref</code> will not be replaced, instead, I'll have <code>prefix=pref</code> + <code>prefix=my text</code>.  I don't want it twice. I just want to replace it. How can I do this?</p>