为什么使用自制高亮功能是一个坏主意

Question

我需要在加载页面时突出显示搜索到的文本，与要突出显示的特定单词匹配的整个单词。

我知道我可以使用div＆amp;的id因此突出了该领域。

这里的问题是我有一个复杂的div结构我在谷歌上发现了这个，但这可以通过“p：”

来解决

 var str = "test";
      $(function(){
           $('p:contains('+str+')').
               each(function(){
                 var regex = new RegExp(str, "g");
                 $(this).html(
                     $(this).html().
                         replace( regex ,
                                 "<span class='highlight'>"+str+"</span>"
                                )
               );
           });
     });

我试图把这段代码弄得乱七八糟地反过来，但是我找不到解决方案

Answer 1

为什么使用自制高亮功能是一个坏主意

从头开始构建自己的突出显示功能可能是一个坏主意的原因是因为你肯定会遇到其他人已经解决的问题。挑战：

您需要删除包含HTML元素的文本节点，以突出显示您的匹配，而不会破坏DOM事件并反复触发DOM重新生成（例如innerHTML就是这种情况）
如果要删除突出显示的元素，则必须删除包含其内容的HTML元素，并且还必须组合拆分的文本节点以进行进一步搜索。这是必要的，因为每个荧光笔插件都会在文本节点内搜索匹配项，如果您的关键字将被拆分为多个文本节点，则无法找到它们。
您还需要构建测试以确保您的插件能够在您没有考虑过的情况下工作。我正在谈论跨浏览器测试！

听起来很复杂？如果你想要一些功能，比如忽略突出显示，变音符号映射，同义词映射，iframe内搜索，分离词搜索等一些元素，这就变得越来越复杂。

使用现有插件

使用现有的，实施良好的插件时，您不必担心上面提到的内容。 Sitepoint上的文章 10 jQuery text highlighter plugins 会比较流行的荧光笔插件。这包括来自这个问题的答案插件。

查看mark.js

mark.js是一个用纯JavaScript编写的插件，但也可以作为jQuery插件使用。它的开发目的是提供比其他插件更多的机会，可以选择：

分别搜索关键字而不是完整的字词
map diacritics（例如，如果“justo”也应匹配“justò”）
忽略自定义元素内的匹配
使用自定义突出显示元素
使用自定义突出显示类
映射自定义同义词
也在iframe内搜索
收到未找到的条款

<强> DEMO

或者，您可以看到this fiddle。

使用示例：

// Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

这是我在GitHub上开发的免费开源软件（project reference）。

Answer 2

我找到了解决方案here的答案。

Answer 3

我根据@Echo提到的插件创建了一个插件。这个版本的优点是它允许你“一次突出显示一堆单词。”

它的目的是像护目镜高亮一样，在其中传递一个搜索字符串，它会找到这些单词的出现并突出显示它们。

您可以选择here

Answer 4

这个JQuery Highlight Plugin提供了一些额外的选项（比如只按照OP的要求搜索整个单词）并且使用起来非常简单。

我正在使用它作为

$(".materia").highlight($('#tbxBusca').val());

突出显示输入文本框的文字。

Answer 5

要突出显示多个文字，请使用此修改后的highlight.js

https://github.com/tankchintan/highlight-js

用法：

<!DOCTYPE html>
    <html>
    <head>
      <script src="jquery.js" type="text/javascript"></script>
      <script src="highlight.js" type="text/javascript"></script> <!-- https://github.com/tankchintan/highlight-js -->
      <script>
      function highlightme()
      {
        var str=document.getElementById('search').value;
        var strarray=str.split(" ");
        void($('#content').removeHighlight().highlight(n)); //pass string array to function
      }
      </script>
      <style type="text/css">
        .highlight{ background-color:yellow; }
      </style>
    </head>
    <body >
        <input type="text" name="search" id="search" onblur="highlightme()" />
        <div id="content">Highlight Highlight Test Multiple</div>
        <a href="JavaScript:$('#content').removeHighlight();">Clear highlight</a>
    </body>
    </html>

搜索＆amp;使用JQuery突出显示

5 个答案:

为什么使用自制高亮功能是一个坏主意

使用现有插件

查看mark.js