jquery - テキスト内の単語を強調表示する

Question

単語を 1 つ選択して、それに何かを適用しようとしています。以下に例を示します。

<p>Some text here</p>

textという単語を選択し、それに何かを適用する方法はありますか? たとえば.css() - テキスト全体を選択してから単語番号 2 を選択できることは知っていますが、それは私がやろうとしていることではありません。その言葉は多くの場所にある可能性があります。

Answer 1

ターゲット Element とその子を見つけ、それらをフィルタリングし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="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

私の理解によると; 文の中の 1 つの単語で遊びたいとします。

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

Answer 3

単語は要素ではないため、選択できません。

それを可能にするには、単語をスパンでラップする必要があります。