title: Search and highlight text on page while keeping html structure
body: <p>Similar questions might have been asked already, but please read the details carefully.</p>
  
  <p>I am using kind of a self-made autocomplete, and now I want to highlight the search term inside the result set.
  This works so far, but only on plain text. The problem is: I need to keep the html structure, if there is one in the result div. Please see my sample: currently I am loosing the included span's with the class bold. How can I keep them?</p>
  
  <p>Thank you for any advice!</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>$('#box').keyup(function () {
    const valThis = this.value;
    const length  = this.value.length;
  
    $('.objType').each(function () {
      const text  = $(this).text();
      const textL = text.toLowerCase();
      const position = textL.indexOf(valThis.toLowerCase());
  
      if (position !== -1) {
        const matches = text.substring(position, (valThis.length + position));
        const regex = new RegExp(matches, 'ig');
        const highlighted = text.replace(regex, `&lt;mark&gt;${matches}&lt;/mark&gt;`);
  
        $(this).html(highlighted).show();
      } else {
       $(this).text(text);
        $(this).hide();
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="text"] { 
      width: 50%;
      margin:10px;
      padding: 5px;
      float:left;
      clear:left;
  }
  div{
    float:left;
    clear:left;
    margin:10px 10px;
  }
  .bold {
    font-weight: 700;
  }
  table td {
    border: solid 1px #ccc;
    padding: 3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input placeholder="Filter results" id="box" type="text" /&gt;
  
  &lt;div class="objType" id="item1"&gt;
    &lt;span class="bold"&gt;Accepted&lt;/span&gt; Event Relation
    &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Lorem&lt;/td&gt;
      &lt;td&gt;ipsum&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="objType" id="item2"&gt;
    Case &lt;span class="bold"&gt;Status&lt;/span&gt; Value
    &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Lorem&lt;/td&gt;
      &lt;td&gt;ipsum&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="objType" id="item3"&gt;
    External &lt;span class="bold"&gt;Data Source&lt;/span&gt;
    &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Lorem&lt;/td&gt;
      &lt;td&gt;ipsum&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="objType" id="item4"&gt;
    Navigation &lt;span class="bold"&gt;Link&lt;/span&gt; Set
    &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Lorem&lt;/td&gt;
      &lt;td&gt;ipsum&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: a JSFiddle for this in addition might be helpful
  => <a href="https://jsfiddle.net/SchweizerSchoggi/6x3ak5d0/7/" rel="noreferrer">https://jsfiddle.net/SchweizerSchoggi/6x3ak5d0/7/</a></p>