title: How to highlight text within & out of tags?
body: <p>I'm developing WebApp. I've feature to quicksearch for articles.</p>
  
  <p>In two words structure is:</p>
  
  <ul>
  <li>Page</li>
  <li>Global array (json, 100-150 items) with articles which is fetched by ajax. (with fields: id, title, snippet). Title &amp; Snippet may contain simple style markup tags.</li>
  </ul>
  
  <p>So, when user type query in popup-quicksearch field, app</p>
  
  <ol>
  <li>Search in global array</li>
  <li>If found matches, <code>push</code> to temporary search results array (with cache)</li>
  <li>Highlight matches in temp. results array and show to user</li>
  </ol>
  
  <p>As you can see, original array doesn't modifing.</p>
  
  <p>Currenty i'm using primitive <code>String.indexOf</code>, but it cannot match text within formatted via html tags text (example below):</p>
  
  <p>Question is about RegEx patterns. I clearly understand that it's not recommended to use RegEx to manipulate with DOM and expecting results below isn't semantically correct but <strong><em>it fits needs</em></strong>.</p>
  
  <p>For example:
  we have something like this:</p>
  
  <p><code>&lt;ul&gt;&lt;li&gt;Item &lt;i&gt;&lt;span style="color:red"&gt;Y&lt;/span&gt;&lt;/i&gt;&lt;/li&gt;&lt;/ul&gt;</code></p>
  
  <p>and we need to highlight query <code>e</code>, expecting result: <code>... It&lt;em&gt;e&lt;/em&gt;m ...</code>, but if use trivial <code>replace(/e/ig, '&lt;em&gt;$&amp;&lt;/em&gt;')</code> it will replace <code>e</code> in <code>style="color:red"</code> too.</p>
  
  <p>i.e. what RegEx pattern to do not touch words in tags?</p>
  
  <hr>
  
  <p>Second example: we need to highlight <code>Item Y</code>, so expecting result is <code>&lt;ul&gt;&lt;li&gt;&lt;em&gt;Item &lt;i&gt;&lt;span style="color:red"&gt;Y&lt;/em&gt;&lt;/span&gt;&lt;/i&gt;&lt;/li&gt;&lt;/ul&gt;</code></p>