选择并突出显示单个单词

时间:2013-10-27 18:42:41

标签: jquery selector

我正在尝试选择一个单词,然后对其应用一些东西。示例如下。

<p>Some text here</p>

有没有办法选择文字这个词,然后对它应用一些东西?例如 .css() - 我知道您可以选择整个文本,然后选择单词2,但这不是我想要做的。这个词可能有很多地方。

2 个答案:

答案 0 :(得分:3)

查找<p>和子项,过滤其contents并搜索文本nodeType:

var word = 'text';

var rgx = new RegExp('\\b('+word+')\\b', 'ig');

$('p, p *').contents().filter(function() {
  return this.nodeType === 3;
}).each(function() {
  $(this).replaceWith($(this).text().replace(rgx, '<span class="extra">$1</span>'));
});
.extra{
  background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some text and a link <a href="text.html">text.html</a> here and <b>some bold text there</b>. Text Is Uppercase.<br>Text... text.<br>  Textual.</p>

我相信上面应该是非常有前景的,因为它不会崩溃HTML,因为它与属性字符串不匹配。

答案 1 :(得分:1)

您无法选择单词,因为它不是元素。

为了实现这一目标,你必须将你的文字包裹起来。