4

例如，假设我有一个网页。

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

  1. <mark>用HTML5 元素包裹它
  2. .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 代码，但这两者都只在上下文中突出显示单词。我操纵了代码来包装单词 using<mark>但我对 JS 的熟练程度不足以实现我的 #2 目标，即突出显示父容器。我渴望看到您的有用建议。谢谢！

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

4

3 回答 3

4 
$('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 示例

于 2013-03-07T17:22:21.670 回答
2

尝试这个

 $("ul li:contains('Lorem')").each(function() {
   $(this).html($(this).html().replace("Lorem","<mark>Lorem</mark>"));
   $(this).parent().addClass("look-at-me");
 })
于 2013-03-07T17:15:40.613 回答
1

这是我想出的：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>。此实现使更改要突出显示的确切模式变得更加容易，因为只有正则表达式需要更新。此外，如果需要，匹配的父元素也会相应地突出显示。

于 2013-03-07T17:20:54.853 回答