title: Apply array of string with string.replace
body: <p>Let's say I have a string like so:</p>
  
  <pre><code>const sentence = "This is my custom string";
  </code></pre>
  
  <p>I want to highlight the words of a input field inside this sentence.</p>
  
  <p>Let's say a say user typed a string and I have converted the separate words into an array like so:</p>
  
  <pre><code>["custom", "string", "is"]
  </code></pre>
  
  <p>I know want to replace the words in my sentence with a highlighted version of the words in my array. For a single word I would do something like this:</p>
  
  <pre><code>const word = 'custom';
  
  const searchFor = new RegExp(`(${word})`, 'gi');
  const replaceWith = '&lt;strong class="highlight"&gt;$1&lt;/strong&gt;';
  
  const highlightedSentence = sentence.replace(searchFor, replaceWith);
  </code></pre>
  
  <p>How can I apply this logic with an array to the entire sentence? </p>
  
  <p>I can't simply loop through it because the string will contain my highlighted class which will also be taken into the highlighting process the the second loop, third loop, etc.</p>
  
  <p>This means that on a second loop if a user where to type:</p>
  
  <pre><code>"high custom"
  </code></pre>
  
  <p>I would highlight my highlighted class, leading to highlight inception.</p>
  
  <p>For an example of what I mean try commenting/uncommenting the 2 highlighter functions:</p>
  
  <p><a href="https://jsfiddle.net/qh9ttvp2/1/" rel="nofollow noreferrer">https://jsfiddle.net/qh9ttvp2/1/</a></p>