如何使用jQuery查找某些文本并设置样式

Question

我很困惑，我需要你的帮助怎么样？如果

<pre>Lorem Ipsum Dolor Sir amet</pre>

我希望“ipsum”文字为黄色。

Answer 1

尝试在其中创建范围标记和wrap您的内容。

$('pre:contains(Ipsum )').each(function(){
  $(this).html(
    $(this).html().replace('Ipsum ','<span class="colorClass">  Ipsum  </span>')
  );
});

Working Demo

Answer 2

你不能突出显示一个文本节点，你需要将它包装在另一个元素中，如span然后用它来应用突出显示

$('pre').html(function(idx, html){
    return html.replace(/(Ipsum)/, '<span class="highlight">$1</span>')
})

演示：Fiddle

Answer 3

运行一点替换函数以编程方式隔离目标字，在本例中为第二个字。如果您始终知道要定位的是哪个单词，也可以将其替换为硬编码值。

<强> HTML

<pre>Lorem Ipsum Dolor Sir amet</pre>

<强> CSS

span { background: yellow; }

<强>的jQuery

$('pre').html(function(i, word) {
  return word.replace(/\s(.*?)\s/, ' <span>$1</span> ');
});

<强> Codepen example