title: How to highlight search text from string of html content without breaking
body: <p>I am looking for some solution that help to search term from html string with highlight feature. I can do this by removing html content from string. But then issue is I will not able to see it original content with highlight. I do have following function that can search &amp; highlight string without html markup.   </p>
  
  <pre><code>private static updateFilterHTMLValue(value: string, filterText: string): string
  {
      if (value == null) {
          return value;
      }
  
      let filterIndex: number = value.toLowerCase().indexOf(filterText);
      if (filterIndex &lt; 0) {
          return null;
      } 
      return value.substr(0, filterIndex) 
          + "&lt;span class='search-highlight'&gt;" 
          + value.substr(filterIndex, filterText.length) 
          + "&lt;/span&gt;" 
          +   value.substr(filterIndex + filterText.length, value.length - (filterIndex + filterText.length));
  }
  </code></pre>
  
  <p>So to manage the search on string with html, I created new function that can search string with html. ( I am removing html part before searching for proper string matching) </p>
  
  <pre><code>private static test(value: string, filterText: string): string {
      if (value == null) {
          return value;
      }
      // Check for raw data without html
      let valueWithoutHtml = TextFilterUtils.removeTextHtmlTags(value);
      let filterIndex: number = valueWithoutHtml.toLowerCase().indexOf(filterText);
      if (filterIndex &lt; 0) {
          return null;
      } else {
          // TODO: 
          // just need to figure how we can highlight properly 
          // real issue is to identify proper index for warping   &lt;span class='search-highlight'&gt; &lt;/span&gt; 
          return "";
      }
  }
  </code></pre>
  
  <p>How can we do warping on string of html ? Any help or guidance will be really appreciated.   </p>