title: RegEx replacing first occurrence in the token only
body: <p>I have the follow case: imagine you want to pre-apend a prefix <code>THIS</code> in a className. and you have the follow possible examples:</p>
  
  <pre><code>.class-name .class-name-whatever {}
  .class-name-other {}
  </code></pre>
  
  <p>I'm using the follow RegExp and works great</p>
  
  <pre><code>return text.replace(new RegExp('class-name', 'g'),`THIS.class-name`);
  </code></pre>
  
  <p>output </p>
  
  <pre><code>THIS.class-name THIS.class-name-whatever {}
  THIS.class-name-other {}
  </code></pre>
  
  <p>GREAT, but here is the problem:</p>
  
  <p>if I have <code>.class-name.class-name-other</code> I would like to end with <code>THIS.class-name.class-name-other</code> instead of <code>THIS.class-nameTHIS.class-name-other</code> how can I target only the first occurrence of <code>.class-name</code>.</p>
  
  <p>I have searched in other RegExp but cant find a solution.</p>
  
  <p>--- UPDATE ---------</p>
  
  <p>Maybe I wasn't really clear in my question sorry about that.
  I need to use <code>g</code> cause I'm searching and replacing an entire chunk of text as example:</p>
  
  <p>Look the follow example <code>.example.example--black</code> will end as <code>THIS.example.THIS.example--black</code> and should <code>THIS.example.example--black</code></p>
  
  <p>input:
  <code>
  .example {min-width: 20rem;padding: 2.5rem 0; }
  .example .example__line--extra-space {display: block;margin-top:1.5625rem;}
  .example .example__copyright a {border: 0; }
  .example.example--black a {color: white; }
  .example.example--black h3 {color: white; }
  @media only screen and (max-width: 46em) {
  .example .example__list--connect .example__connect__link {height: 2.625rem; width: 2.625rem; }
  .example .example__list--connect .example__connect__link img {width: 1rem; vertical-align: middle; } }
  </code>
  <strong>Should add <code>THIS</code> at the end of processing. to each of .example ocurrence.</strong></p>