找到一个特定的单词并用span标签包装 [英] find a specific word and wrap with a span tag

问题描述

我不确定最好的办法。这是问题所在。我有一个菜单（列表项）具有不规则的显示模式。我不能直接改变html，因为它是从cms吐出来的。我希望如此，如果一个数组中的单词与链接中的单词匹配，那么该单词就会有一个跨度。
这是简化的代码：

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>

我想要的结果是：

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

数组就像是about，store，faq ......

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

脚本会查找这些单词并将其换行...

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

不确定如何解决这个问题。如果它更容易.sinc e大词只出现在开头或结尾但不出现在中间...我可以有另一个函数来查找最后一个单词。

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

只有5个菜单项（不会改变），单词永远不会改变，这就是为什么我想只使用一个数组......

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

这里是输出i获取插件使用：

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>

推荐答案

我最近写了一个简单的插件，可以实现这个目的：

I wrote a simple plugin recently that could accomplish 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)

另外：

我使用.items作为因为在我的例子中我给了ul一类物品。你可以提供任何选择器，它会突出显示元素中的所有文本及其子元素。

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();
    }
});

这篇关于找到一个特定的单词并用span标签包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！