title: Javascript replace function is not working as expected with special character
body: <p>I am trying to update a div tag with new metadata in a file and I am using the replace function to do this job ,but is not working as expected , it is adding junk  tag in the middle.</p>
  <p>I am trying this below code.</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>let str = `&lt;div data-bind="style:{'background-color':typeof(CalEventBgColor)!=='undefined'? CalEventBgColor:''},css:typeof(CalEventType)!=='undefined'? 'event '+ CalEventType:'event',attr:{ title:dynamicTitle ,id: CalEventId+'$'+$parentContext.$index()+'$'+$index()+$parents[1].componentid}" role="button" tabindex="0"&gt;
  &lt;/div&gt;`;
  let oldVal = `&lt;div data-bind="style:{'background-color':typeof(CalEventBgColor)!=='undefined'? CalEventBgColor:''},css:typeof(CalEventType)!=='undefined'? 'event '+ CalEventType:'event',attr:{ title:dynamicTitle ,id: CalEventId+'$'+$parentContext.$index()+'$'+$index()+$parents[1].componentid}" role="button" tabindex="0"&gt;`;
  let newVal =`&lt;div :class="[[typeof(CalEventType)!=='undefined'? 'event '+ CalEventType:'event']]" :title="[[dynamicTitle]]" :id="[[CalEventId+'$'+$parentContext.$index()+'$'+$index()+$parents[1].componentid]]" :style="[[{ 'background-color':typeof(CalEventBgColor)!=='undefined'? CalEventBgColor:''}]]" role="button" tabindex="0"&gt;`;
  console.log(str.replace(oldVal,newVal));</code></pre>
  </div>
  </div>
  </p>
  <p>Basically if you see the :id property it is broken with junk character, please let me know if we can do something for this.</p>