使用 jQuery 突出显示单词的父级？答案

【问题标题】：Highlight a word's parent using jQuery?使用 jQuery 突出显示单词的父级？
【发布时间】：2013-02-23 00:31:30
【问题描述】：

假设我有一个网页。

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

我想找到单词“Lorem”的所有实例并以两种方式操作它们：

用 HTML5 元素包裹它
在其父元素上运行 .addClass('look-at-me');。

因此生成的 HTML 将是

<ul>
  <li class="look-at-me"><mark>Lorem</mark> ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

我已经阅读了Highlight a word with jQuery 上的所有 cmets，并且我一直在使用来自 highlight: JavaScript text higlighting jQuery plugin 的 JS 代码，但这两者都只涉及在上下文中突出显示单词。我使用 操纵代码来包装单词，但我对 JS 的熟练程度不足以实现我的 #2 目标，即突出显示父容器。我渴望看到您的有用建议。谢谢！

编辑：已解决！ http://jsfiddle.net/GB8zP/1/

【问题讨论】：

你能在 jsfiddle.net 上发布一个例子吗？
所以基本上你想找到一个词，并在它周围附加 div，对吗？编辑：抱歉，可能不会在它周围附加 div，而是在你的情况下将一个类附加到元素/

【解决方案1】：

$('li').each(function () {
    $(this).html($(this).html().replace(/Lorem/ig, "<mark>$&</mark>"));
    if ($(this).text().toLowerCase().indexOf('lorem') >= 0) $(this).addClass('look-at-me');
});

jsFiddle example

【讨论】：

为什么不$('li').each(...).has('mark').addClass('look-at-me')？
@JaredFarrish - 我想不止一种给猫剥皮的方法。
这对我来说似乎很明显，我想我错过了什么。
小细节：我会使用 /\bLorem\b/ig 匹配单词边界，以确保它不会匹配 Lorems 例如（除非这是 OP 当然想要的）。除此之外：+1
我非常喜欢这个。但是，虽然它适用于 jsFiddle，但它不适用于我的实际站点实现。让我仔细检查一些事情，然后我会将其标记为已回答。

【解决方案2】：

试试这个

 $("ul li:contains('Lorem')").each(function() {
   $(this).html($(this).html().replace("Lorem","<mark>Lorem</mark>"));
   $(this).parent().addClass("look-at-me");
 })

【讨论】：

我可能会在.replace() 上使用正则表达式，这样您就可以保留它的任何大小写（即LOREM 不会变成Lorem）。否则，很好的答案。
这将导致 标签变成文字文本，而不是解释为html。 OP 的问题比乍一看要复杂。
很好的建议，但它是将元素放在文本中而不是 HTML 中。
不适用于小写“lorem”。在测试中对我来说失败了，因为它还将“look-at-me”类应用于每个 li，无论它是否包含“lorem”。
你应该尽量避免像 jQuery 中的 * 这样昂贵的选择器。

【解决方案3】：

这是我想出的：http://jsfiddle.net/c24w/cZegf/

HTML

<ul id="test">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam lorem tincidunt mauris eu Lorem risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

$('li', '#test').each(function highlightElement(i, e) {
    e = $(e);
    e.html(e.html().replace(/lorem/gi, function handleMatch(match) {
        if (!e.hasClass('look-at-me')) e.addClass('look-at-me');
        return '<match>' + match + '</match>';
    }));
});

CSS

.look-at-me {
    background: #f00;
}
match {
    background: #ff0;
}

信息

正则表达式：

/lorem/gi
       ↑↑
       ||_ case-insensitive
       |_ matches multiple (global)

匹配函数：

handleMatch(match) - 每个成功的正则表达式匹配都会传递给此函数，其中匹配的文本用<match></match> 包围。此实现使更改要突出显示的确切模式变得更容易，因为只有正则表达式需要更新。此外，如果需要，匹配的父元素也会相应地突出显示。

【讨论】：

您的代码会突出显示每个 li，而不仅仅是包含 lorem 的那些。它在小写 lorem 上也失败了。
+1 用于使用作用域 jQuery 选择器（并提供有据可查的答案）。