21

我真的以为这会在几年前得到回答，但我仍然没有找到任何解决方案：

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

就像您在 Google Chrome 中使用Ctrl+F搜索一样：输入搜索词时，它会突出显示与我输入的词匹配的所有子字符串。

就个人而言，我会遍历 DOM 树的所有元素，replace用类似的东西做一些搜索词

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

但我想一定有一些更有效的方法？

我的问题：

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

4

4 回答 4

7

几个月来，我一直在努力寻找一个强大的文本荧光笔来复制浏览器ctrl+f功能。我使用了许多 jQuery 插件。有些比其他更好，但没有一个能够跨越 HTML。假设您想查找包含链接的文本 - 浏览器可以做到，但我发现没有 jQuery 插件可以做到。

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

find(string, matchcase, searchBackward)

string ：要搜索的文本字符串。

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

searchBackward ：布尔值。如果为真，则指定向后搜索。如果提供此参数，则还必须提供区分大小写。

它突出显示包含 html 的字符串，并且与您关心的每个浏览器兼容。在http://www.w3resource.com/javascript/client-object-property-method/window-find.php了解更多信息

不幸的是，您似乎无能为力。我无法将其包装在样式化的跨度标签中、获取位置、滚动到它或更改突出显示颜色。我还在寻找理想的ctrl+ fJS 功能。

于 2014-01-24T21:43:25.487 回答
6

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

虽然目前还没有标准化，但几乎所有主流的较新版本的浏览器都支持它，例如 Google Chrome、Firefox、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 上的代码。

于 2017-11-22T17:32:50.113 回答
2

如果您想突出显示来自 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);
    });    
  });
});
于 2013-04-27T11:39:49.673 回答
1

这样做的最佳选择通常是，有点令人惊讶的是，不这样做。

转而依赖网络浏览器的内置搜索功能：这可确保用户获得一致的体验，并为您省去很多麻烦，因为您不得不将已经完成的工作加倍以实现这一点。

于 2013-04-27T11:40:03.027 回答