title: Why does my regex fail when trying to indicate beginning of string in replace()?
body: <p>Moving from Perl to Node I'm confused why given the passed object <code>data</code> of:</p>
  <pre class="lang-js prettyprint-override"><code>{
    xAxis: 'string',
    yAxis: 'string',
    zAxis: 'string',
    data: '\n' +
      'p.foo {\n' +
      '\tcolor:#000000;\n' +
      '\tfont-family:&quot;Open Sans&quot;;\n' +
      '\tfont-size:1em;\n' +
      '\tfont-style:normal;\n' +
      '\tfont-variant:normal;\n' +
      '\tfont-weight:normal;\n' +
      '\tline-height:1;\n' +
      '\tmargin-bottom:0;\n' +
      '\tmargin-left:0;\n' +
      '\tmargin-right:0;\n' +
      '\tmargin-top:0;\n' +
      '\torphans:1;\n' +
      '\tpage-break-after:auto;\n' +
      '\tpage-break-before:auto;\n' +
      '\ttext-align:left;\n' +
      '\ttext-decoration:none;\n' +
      '\ttext-indent:0;\n' +
      '\ttext-transform:none;\n' +
      '\twidows:1;\n' +
      '}\n' +
      'p.bar {\n' +
      '\tcolor:#000000;\n' +
      '\tfont-family:&quot;Open Sans&quot;;\n' +
      '\tfont-size:1em;\n' +
      '\tfont-style:normal;\n' +
      '\tfont-variant:normal;\n' +
      '\tfont-weight:normal;\n' +
      '\tline-height:1;\n' +
      '\tmargin-bottom:0;\n' +
      '\tmargin-left:0;\n' +
      '\tmargin-right:0;\n' +
      '\tmargin-top:0;\n' +
      '\torphans:1;\n' +
      '\tpage-break-after:auto;\n' +
      '\tpage-break-before:auto;\n' +
      '\ttext-align:left;\n' +
      '\ttext-decoration:none;\n' +
      '\ttext-indent:0;\n' +
      '\ttext-transform:none;\n' +
      '\twidows:1;\n' +
      '}\n'
  }
  </code></pre>
  <p>if trying to replace any instance of a <code>p</code> or <code>span</code> from a beginning of line (<code>^</code>):</p>
  <pre class="lang-js prettyprint-override"><code>obj.data = obj.data.replace(/^(p|span)(?=\.)/gi, '') 
  </code></pre>
  <p>the replace will not work and will only work as:</p>
  <pre class="lang-js prettyprint-override"><code>obj.data = obj.data.replace(/(p|span)(?=\.)/gi, '') 
  </code></pre>
  <p>example:</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 test = {
    xAxis: 'string',
    yAxis: 'string',
    zAxis: 'string',
    data: '\n' +
      'p.foo {\n' +
      '\tcolor:#000000;\n' +
      '\tfont-family:"Open Sans";\n' +
      '\tfont-size:1em;\n' +
      '\tfont-style:normal;\n' +
      '\tfont-variant:normal;\n' +
      '\tfont-weight:normal;\n' +
      '\tline-height:1;\n' +
      '\tmargin-bottom:0;\n' +
      '\tmargin-left:0;\n' +
      '\tmargin-right:0;\n' +
      '\tmargin-top:0;\n' +
      '\torphans:1;\n' +
      '\tpage-break-after:auto;\n' +
      '\tpage-break-before:auto;\n' +
      '\ttext-align:left;\n' +
      '\ttext-decoration:none;\n' +
      '\ttext-indent:0;\n' +
      '\ttext-transform:none;\n' +
      '\twidows:1;\n' +
      '}\n' +
      'p.bar {\n' +
      '\tcolor:#000000;\n' +
      '\tfont-family:"Open Sans";\n' +
      '\tfont-size:1em;\n' +
      '\tfont-style:normal;\n' +
      '\tfont-variant:normal;\n' +
      '\tfont-weight:normal;\n' +
      '\tline-height:1;\n' +
      '\tmargin-bottom:0;\n' +
      '\tmargin-left:0;\n' +
      '\tmargin-right:0;\n' +
      '\tmargin-top:0;\n' +
      '\torphans:1;\n' +
      '\tpage-break-after:auto;\n' +
      '\tpage-break-before:auto;\n' +
      '\ttext-align:left;\n' +
      '\ttext-decoration:none;\n' +
      '\ttext-indent:0;\n' +
      '\ttext-transform:none;\n' +
      '\twidows:1;\n' +
      '}\n'
  }
  
  console.log(test.data.replace(/^(p|span)(?=\.)/gi, '')) // doesn't work
  console.log(test.data.replace(/(p|span)(?=\.)/gi, '')) // works</code></pre>
  </div>
  </div>
  </p>
  <p>testing with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" rel="nofollow noreferrer">RegExp</a> it works only on the first found:</p>
  <pre class="lang-js prettyprint-override"><code>obj.data = obj.data.replace(new RegExp(/^(p|span)(?=\.)/, 'ig'), '')
  </code></pre>
  <p>and seems to be due to the <code>m</code> flag needed, so this works:</p>
  <pre class="lang-js prettyprint-override"><code>obj.data = obj.data.replace(new RegExp(/^(p|span)(?=\.)/, 'igm'), '')
  </code></pre>
  <p>When reading the type of <code>obj.data</code>:</p>
  <pre class="lang-js prettyprint-override"><code>console.log(typeof obj.data) // returns string
  </code></pre>
  <p>it shows <code>string</code>. Upon research I'm not seeing a reason why but I've read:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/49800718/javascript-replace-with-regex-not-working-correctly">Javascript replace with regex not working correctly</a></li>
  <li><a href="https://stackoverflow.com/questions/6646703/javascript-regexp-replace-not-working-but-string-replace-works">javascript regexp replace not working, but string replace works</a></li>
  </ul>
  <p>Why am I seeing mixed results from my regex in a <code>replace()</code> while trying to use <code>^</code> when passing in the object's data and why does it only work with RegExp?</p>
  <hr />
  <h2>Edit:</h2>
  <p>I think my issue is from a misunderstanding of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags" rel="nofollow noreferrer">JavaScript flags</a>. I assumed that because the object's data was a string the flag <code>g</code> <strong>Global Search</strong> flag would work but it seems that I need <code>m</code> <strong>Multi-line Search</strong> flag.</p>