title: Changing background color of <mark> tag in order to mimic CTRL+F functionality
body: <p>I am trying to mimic the functionality of CTRL+F of the browser within a specific div. First, the user will enter a search query, click 'find,' and all of the matching results will be highlighted within the div. I am using the following function (which is working exactly as it should) to achieve this:</p>
  
  <pre><code>function highlight(str, $elem) {
      var regex = new RegExp(str + "(?!([^&lt;]+)?&gt;)", "gi");
      var found = [];
  
      $elem.html($elem.html().replace(/&lt;\/?mark&gt;/g, ''));
  
      if (str === '') return found;
  
      $elem.html($elem.html().replace(regex, function (matched) {
          found.push(matched);
          return "&lt;mark&gt;" + matched + "&lt;/mark&gt;";
      }));
  
      return found;
  }
  </code></pre>
  
  <p>Once this function highlights all of the matched results, I am using the following conditional to scroll through the div and stop at each result:</p>
  
  <pre><code>if (found.length &gt; 0) {
      $("#text").scrollTop($("mark:eq(" + searchIndex++ +")").offset().top - $("#text").offset().top + $("#text").scrollTop());
      if (searchIndex === found.length) searchIndex = 0;
  }
  </code></pre>
  
  <p>This also works exactly as expected. Where I am running into trouble is trying to change the css background-color attribute of the currently "active" &lt; mark > tag. I am trying to use something like the below to accomplish this, but it appears to be breaking the internet.</p>
  
  <pre><code>if (found.length &gt; 0) {
      $("mark:eq(" + (searchIndex - 1 === -1) ? found.length-1 : searchIndex-1 +")").css({"background-color": "#FFFF00"}) ;
      $("mark:eq(" + searchIndex +")").css({"background-color": "#DAA520"}) ;
      $("#text").scrollTop($("mark:eq(" + searchIndex++ +")").offset().top - $("#text").offset().top + $("#text").scrollTop());
      if (searchIndex === found.length) searchIndex = 0;
  }
  </code></pre>
  
  <p>For some reason this is inserting another &lt; mark > tag surrounding the text within &lt; h1 > and I have no idea why that would happen. The links to jsfiddle are below:</p>
  
  <p><a href="https://jsfiddle.net/simonpaonessa/56nznmm7/2/" rel="nofollow">Working search (without background-color changing)</a></p>
  
  <p><a href="https://jsfiddle.net/simonpaonessa/6a4t8hgz/" rel="nofollow">Non-working search (with background-color changing)</a></p>