如何使用JavaScript突出显示HTML页面中的所有文本事件？ [英] How to highlight all text occurrences in a HTML page with JavaScript?

问题描述

我想突出显示所有事件（即制作彩色背景）。

我想在几年前回答这个问题，但我没有找到任何解决方案。 （完整的HTML页面上的（子）字符串），完全客户端与JavaScript。

就像您使用 Ctrl + < kbd> F 在谷歌浏览器内进行搜索：输入搜索词时，它突出显示与我输入的词相匹配的所有子字符串。

就我个人而言，所有元素的DOM树，做一些替换的搜索词，像

 < span style =background-color：yellow> MySearchTerm< / span> 
  

但我认为必须有一些更有效的方法吗？



我的问题：



如何使用JavaScript（或jQuery）突出显示HTML页面内的所有子字符串事件？也可以选择使用< span> 替换内容。还有一个选项可以尝试哪个是Jquery插件。 这里就是其中之一。

您可以像这样使用

  $（'body'） .text（）。highlight（'my text to highlight'）; 
  

I really thought this would have been answered years ago, still I did not find any solution:

I want to highlight (i.e. make a colored background) all occurrences of a (sub-)string on an entire HTML page, completely client-side with JavaScript.

Just as you would use Ctrl+F to search inside Google Chrome: When entering the search term, it highlights all the substrings that match my entered term.

Personally, I would walk all elements of the DOM tree, doing some replace of the search term with something like

<span style="background-color: yellow">MySearchTerm</span>

But I think there must be some more effective way?

My question:

How to use JavaScript (or jQuery) to highlight all substring occurrences inside a HTML page?

解决方案

Replacing the content with <span> is also an option. There is one more option that you can try which is Jquery plugins. Here is one of them.

You can use it like this

$('body').text().highlight('my text to highlight');

这篇关于如何使用JavaScript突出显示HTML页面中的所有文本事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！