找到一个特定的单词并用跨度标签换行[重复]

Question

我不确定解决此问题的最佳方法。这就是问题所在。我有一个显示不规则模式的菜单（列表项）。我无法直接更改 html，因为它正在从 cms 中吐出。我想要这样，如果数组中的一个词与链接中的一个词匹配，那么该词有一个环绕它的跨度。 这是简化的代码：

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

我可以找到第一个这样做的词：

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

但是，我想做的是查看一个数组列表，并将我想要的那些特定单词包装在它们出现的任何位置。

数组可能是 about、store、faq...

脚本会查找这些单词并将它们包装起来......

不太确定该怎么做。如果它更容易。因为大词只出现在开头或结尾，但不在中间……我可以有另一个函数来查找最后一个词。

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

这是我使用插件得到的输出：

<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

你看过这个jQuery plugin吗？我自己没用过，但看起来很容易完成这项工作。

Answer 2

我最近写了一个简单的插件，可以做到这一点：

（它不再存在）

你会这样使用它：

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

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

由于我使用的是正则表达式，你也可以这样做：

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

还有：

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

这是插件的工作部分，以防链接因某种原因失效：

$(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 3

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