find a specific word and wrap with a span tag
<p>i am not sure the best way to go about this. here is the problem. i have a menu (list items) that has an irregular pattern of display. i cant alter the html directly as it is being spit out of a cms. i would like it so that if a word in an array matches a word in the link then that word has a span wrapped around it.
this is that code simplified:</p>

<pre><code>&lt;li class="item1"&gt;&lt;a href="gosomewhere.html"&gt;About My Store&lt;/a&gt;&lt;/li&gt;
&lt;li class="item2"&gt;&lt;a href="gosomewhereelse.html"&gt;Find Locations&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p>result i want is this:</p>

<pre><code>&lt;li class="item1"&gt;&lt;a href="gosomewhere.html"&gt;&lt;span class="bigwords"&gt;About My &lt;/span&gt;Store&lt;/a&gt;&lt;/li&gt;
&lt;li class="item2"&gt;&lt;a href="gosomewhere.html"&gt;Find &lt;span class="bigwords"&gt;Locations&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p>i can find the first word(s) doing this:</p>

<pre><code>      $(function() {
    $.fn.wrapStart = function (numWords) {
    var node = this.contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text(),
        first = text.split(" ", numWords).join(" ");

    if (!node.length)
        return;

    node[0].nodeValue = text.slice(first.length);
    node.before('&lt;span class="bigwords"&gt;' + first + '&lt;/span&gt;');
};


$("li.item1 a").wrapStart(1);
</code></pre>

<p>however, what i would like to do is look through an array list and wrap those specific words that i want  in whatever position they occur.</p>

<p>the array would be like about, store, faq...</p>

<p>the script would look for those words and wrap them...</p>

<p>not really sure how to go about this. if its easier. since the big words only occur either at the beginning or the end but not in middle... i could have another function that looks for the last word(s).</p>

<p>there are only 5 menu  items (wont change) and the words will never change, which is why i thought of just using an array...</p>

<p>here is the output i get of the plugin use:</p>

<pre><code>&lt;ul class="menu&gt;&lt;li class="item-102 parent"&gt;
&lt;a class="about" title="About my store" href="#"&gt;
&lt;span class="bigwords"&gt;
&lt;a xmlns="http://www.w3.org/1999/xhtml"&gt;About&lt;/a&gt;
&lt;/span&gt;
&lt;a xmlns="http://www.w3.org/1999/xhtml"&gt; my store&lt;/a&gt;
&lt;/a&gt;
&lt;/li&gt;&lt;/ul&gt;
</code></pre>
