title: jQuery: Find text and replace with HTML
body: <p>I try to find and replace text (using jQuery). Actually I'm trying to add a span element around the text. I should also be able to remove the span again without losing the text inside.</p>
  
  <p>For example, let's say I have the following situation to start with:</p>
  
  <pre><code>&lt;span&gt;This is a span element&lt;/span&gt;
  </code></pre>
  
  <p>And I want to be able to do this dynamically using jQuery/JavaScript:</p>
  
  <pre><code>&lt;span&gt;This is a &lt;span class="marked"&gt;span&lt;/span&gt; element&lt;/span&gt;
  </code></pre>
  
  <p>I should also be able to remove the span.marked and get back to the first result.</p>
  
  <p>The problem however is that I want to do this on all text inside a container with multiple children and subchildren and so on.</p>
  
  <p>The code I got so far will do the following and that is not what I want:</p>
  
  <pre><code>&lt;&lt;span class="marked"&gt;span&lt;/span&gt;&gt;This is a &lt;span class="marked"&gt;span&lt;/&lt;span class="marked"&gt;span&lt;/span&gt; element&lt;/span&gt;
  </code></pre>
  
  <p>I want to do this for ALL text on the page, not just the first it finds.</p>
  
  <p>EDIT: my code so far for doing this:</p>
  
  <pre><code>var re = new RegExp(word, 'g');
  $('.container').html($('.container').html().replace(re, '&lt;span class="marked"&gt;' + word + '&lt;/span&gt;'));
  </code></pre>
  
  <p>word is a string with the text to wrap spans around.</p>