如何使用 jQuery 突出显示文本中的特定单词？

使用 jQuery 突出显示单词

问题：

突出显示文本块中的特定单词。例如，突出显示以下文本中的“dolor”：

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

预期结果：

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

jQuery 解决方案：

是的，使用 jQuery 是可以实现这种效果的。以下代码片段提供了解决方案：

$.fn.highlight = function(word) {
  var pattern = word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&"");
  return this.each(function() {
    $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&amp;</span>"));
  });
};

$("p").highlight("dolor");

说明：

1. $.fn.highlight 是一个自定义 jQuery 函数，它将单词作为参数。
2. pattern 变量通过转义中的特殊字符来创建正则表达式模式word.
3. each 函数迭代所有匹配的元素（在本例中为段落标签），并用包围它的 标签替换出现的单词。
4. 最后， $("p").highlight("dolor") 行调用自定义函数，传递“dolor”作为单词

注意：

还有许多其他基于 jQuery 的解决方案和外部插件可用，可满足特定需求并提供附加功能。探索这些选项以找到最适合您要求的选项。

以上是如何使用 jQuery 突出显示文本中的特定单词？的详细内容。更多信息请关注PHP中文网其他相关文章！