jquery - 突出显示文本中的单词

Question

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

<p>Some text here</p>

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

Answer 1

找到目标元素及其子元素，过滤它们contents并搜索文本节点类型：

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="highlight">$1</span>'));
});

.highlight {
  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 崩溃，因为它与属性字符串不匹配。

Answer 2

你不能选择一个词，因为它不是一个元素。

为了使它成为可能，你必须用跨度来包装你的单词。

Answer 3

据我了解；你想在一个句子中玩一个单词。

<p>This a <span style="color:blue">sample</span> paragraph.</p>