Question

比方说我有一个网页。

<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”这个词的所有实例并以两种方式操纵它们：

用<mark> 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上的所有评论，并且我一直在使用来自highlight: JavaScript text higlighting jQuery plugin的JS代码，但这两个问题只涉及在上下文中突出显示的单词。我操纵代码使用<mark>来包装单词，但是我对JS的熟练程度不足以实现突出显示父容器的＃2目标。我很想看到你有用的建议。谢谢！

http://jsfiddle.net/GB8zP/1/

Answer 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

Answer 2

试试这个

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

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

JS

$('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>包围。此实现可以更轻松地更改要突出显示的确切模式，因为只有正则表达式需要更新。此外，如果需要，匹配的父元素也会相应地突出显示。

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

3 个答案: