如何使用JavaScript突出显示HTML页面中的所有文本？

Question

我真的以为这会在几年前得到解答,但我还没有找到任何解决方案:

我想在整个HTML页面上突出显示(即制作彩色背景)所有出现的(子)字符串,完全在客户端使用JavaScript.

就像在Chrome浏览器中使用Ctrl+ F进行搜索一样:输入搜索字词时,它会突出显示与我输入的字词匹配的所有子字符串.

就个人而言,我会走DOM树的所有元素,replace用类似的东西做一些搜索术语

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

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

我的问题:

如何使用JavaScript(或jQuery)突出显示HTML页面中的所有子字符串出现？

Answer 1

替换内容<span>也是一种选择.还有一个选项可以尝试Jquery插件.这是其中之一.

你可以像这样使用它

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

Answer 2

我很难找到一个强大的文本荧光笔,可以复制几个月的浏览器ctrl+ f功能.我使用了大量的jQuery插件.有些比其他更好,但没有一个能够跨越HTML.假设您要查找包含链接的文本 - 浏览器可以执行此操作,但我找不到jQuery插件.

原来裸裸的javascript有答案.只是window.find().

find(string, matchcase, searchBackward)

string:要搜索的文本字符串.

matchcase:布尔值.如果为true,则指定区分大小写的搜索.如果提供此参数,则还必须向后提供.

searchBackward:布尔值.如果为true,则指定向后搜索.如果提供此参数,则还必须提供大小写敏感.

它突出显示了html laden字符串,它与您关注的每个浏览器兼容.有关它的更多信息,请访问http://www.w3resource.com/javascript/client-object-property-method/window-find.php

不幸的是,你似乎无法用它做任何事情.我无法将其包裹在样式的span标签中,获取位置,滚动到它或更改突出显示颜色.我还在寻找理想的ctrl+ fJS功能.

Answer 3

Window.find()应该可以完成这项工作。

虽然还没有标准化，但几乎所有主流的新版本浏览器都支持它，比如谷歌 Chrome、火狐、IE、Safari、Opera，以及 iPhone/Android/Amazon Fire 平板电脑和手机上的浏览器等。

下面是一个示例实现：

/*
 * Search for text in the window ignoring tags
 * 
 * Parameters:
 *     text: a string to search for
 *     backgroundColor: 
 *         "yellow" for example, when you would like to highlight the words
 *         "transparent", when you would like to clear the highlights
 * */
function doSearch(text, backgroundColor) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.execCommand("HiliteColor", false, backgroundColor);
            sel.collapseToEnd();
        }
        document.designMode = "off";
    }
}

代码来自 Tim Down使用 Window.find() 的实现

在搜索之前，HTML 文本如下所示：

<p>Here is some searchable text with some lápices in it, and some
    <b>for<i>mat</i>t</b>ing bits, and a URL
    <a href="https://www.google.com">Google Search Engine</a> as a link.
</p>

例如，搜索文本后，some lápices in it, and some formatting bits, and a URL GoogleHTML 文本将更改为：

<p>Here is some searchable text with <span style="background-color: yellow;">some lápices in it, and some
    <b>for<i>mat</i>t</b>ing bits, and a URL
    </span><a href="https://www.google.com"><span style="background-color: yellow;">Google </span>Search Engine</a> as a link.
</p>

请参阅jsfiddle 上的代码。

Answer 4

如果您想突出显示来自 google 的搜索词，那么您可以使用https://github.com/hail2u/jquery.highlight-search-terms上提供的 jquery 插件

如果你想要像 chrome 这样的功能。你可以使用这个代码。

$(document).ready(function(){
  var search = ['p', 'div', 'span'];

  $("#highlighter").bind('keyup', function(e){
    var pattern = $(this).val();

    $.each(search, function(i){
        var str = search[i];        
        var orgText = $(str).text();

        orgText = orgText.replace(pattern, function($1){
          return "<span style='background-color: red;'>" + $1 + "</span>"
        });

        $(str).html(orgText);
    });    
  });
});