Loop through textNodes within selection with unknown number of descendants
<p>I'm required to basically <em>Find and replace</em> a list of words retrieved as an array of objects (which have comma separated terms) from a webservice. The <em>find and replace</em> only occurs on particular elements in the DOM, but they can have an unknown and varying number of children (of which can be nested an unknown amount of times).</p>

<p>The main part I'm struggling with is figuring out how to select all nodes down to textNode level, with an unknown amount of nested elements.</p>

<p>Here is a very stripped-down example:</p>

<p>Retrieved from the webservice:</p>

<pre><code>[{
  terms: 'first term, second term',
  youtubeid: '123qwerty789'
},{
  terms: 'match, all, of these',
  youtubeid: '123qwerty789'
},{
  terms: 'only one term',
  youtubeid: '123qwerty789'
},
etc]
</code></pre>

<p>HTML could be something like:</p>

<pre><code>&lt;div id="my-wrapper"&gt;  
  &lt;ol&gt;
    &lt;li&gt;This is some text here without a term&lt;/li&gt;
    &lt;li&gt;This is some text here with only one term&lt;/li&gt;
    &lt;li&gt;This is some text here that has &lt;strong&gt;the first term&lt;/strong&gt; nested!&lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>$('#my-wrapper').contents().each(function(){
  // Unfortunately only provides the &lt;ol&gt; - 
  // How would I modify this to give me all nested elements in a loopable format?
});
</code></pre>
