找到一个特定的单词并用span标签包装

Question

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:

<li class="item1"><a href="gosomewhere.html">About My Store</a></li>
<li class="item2"><a href="gosomewhereelse.html">Find Locations</a></li>

result i want is this:

<li class="item1"><a href="gosomewhere.html"><span class="bigwords">About My </span>Store</a></li>
<li class="item2"><a href="gosomewhere.html">Find <span class="bigwords">Locations</span></a></li>

i can find the first word(s) doing this:

      $(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('<span class="bigwords">' + first + '</span>');
};


$("li.item1 a").wrapStart(1);

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.

the array would be like about, store, faq...

the script would look for those words and wrap them...

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).

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

here is the output i get of the plugin use:

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

Answer 1

I wrote a simple plugin recently that could accomplish this:

(it no longer exists)

you would use it like this:

var arr = ["about my","locations"];
$.each(arr,function(i,word){
  $(".items").highlightText(word,"bigwords",true)
});

http://jsfiddle.net/4gtmH/23/

Since i'm using a regexp, you could also do it this way:

$(".items").highlightText("about my|locations","bigwords",true)

Also:

I used .items as a class because in my example i gave the ul a class of items. you can supply any selector and it will highlight all text within the element and it's children.

Here's the part of the plugin that does the work, just in case that link goes dead for some reason:

$(this).find("*").andSelf().contents()

// filter to only text nodes that aren't already highlighted
.filter(function () {
    return this.nodeType === 3 && $(this).closest("." + hClass).length === 0;
})

// loop through each text node
.each(function () {
    var output;
    output = this.nodeValue.replace(re, "<" + defaultTagName + " class='" + hClass + "'>$1</" + defaultTagName + ">");
    if (output !== this.nodeValue) {
        $(this).wrap("<p></p>").parent()
            .html(output).contents().unwrap();
    }
});

Answer 2

Have you looked at this jQuery plugin ? Haven't used it myself but looks like it does the job pretty easily.

Answer 3

您可以在所有元素上创建一个jquery选择器，并且foreach结果在选择器中设置val，并将val替换为数据