搜索和使用JQuery突出显示 [英] Search & Highlight using JQuery

问题描述

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

I need to Highlight searched text when the page is loaded , the whole words that match a specific word to be highlighted .

我知道我可以使用div&的ID相应地突出显示该字段.

I know I can use id of the div & accordingly highlight the field .

这里的问题是我的div结构很复杂
我在Google上找到了这个，但是在"p:"上可以使用

The issue here that I have a complex structure of div
I have found this over Google but this works over "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>"
                                )
               );
           });
     });

我试图弄乱此代码以循环遍历div，但无法解决

I have tried to mess with this code to loop over div instead , but I couldn't reach a solution

推荐答案

为什么使用自制的突出显示功能不是一个好主意

从头开始构建自己的突出显示功能可能不是一个好主意，原因是您肯定会遇到其他人已经解决的问题.挑战:

Why using a selfmade highlighting function is a bad idea

The reason why it's probably a bad idea to start building your own highlighting function from scratch is because you will certainly run into issues that others have already solved. Challenges:

• 您需要删除带有HTML元素的文本节点，以突出显示您的匹配内容，而又不会破坏DOM事件并一遍又一遍地触发DOM生成(例如innerHTML就是这种情况)
• 如果要删除突出显示的元素，则必须删除带有其内容的HTML元素，并且还必须合并分割后的文本节点以进行进一步的搜索.这是必要的，因为每个荧光笔插件都在文本节点内部搜索匹配项，并且如果您的关键字将被拆分为多个文本节点，则将找不到它们.
• 您还需要构建测试以确保您的插件可以在您未曾想到的情况下使用.我在谈论跨浏览器测试！

• You would need to remove text nodes with HTML elements to highlight your matches without destroying DOM events and triggering DOM regeneration over and over again (which would be the case with e.g. innerHTML)
• If you want to remove highlighted elements you would have to remove HTML elements with their content and also have to combine the splitted text-nodes for further searches. This is necessary because every highlighter plugin searches inside text nodes for matches and if your keywords will be splitted into several text nodes they will not being found.
• You would also need to build tests to make sure your plugin works in situations which you have not thought about. And I'm talking about cross-browser tests!

听起来复杂吗?如果您想要某些功能，例如忽略突出显示，变音符号映射，同义词映射，iframe内搜索，分隔词搜索等某些元素，则会变得越来越复杂.

Sounds complicated? If you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, search inside iframes, separated word search, etc. this becomes more and more complicated.

使用现有的，实现良好的插件时，您不必担心上面提到的事情.文章 10个jQuery文本突出显示插件 在Sitepoint上比较流行的荧光笔插件.这包括此问题的答案插件.

When using an existing, well implemented plugin, you don't have to worry about above named things. The article 10 jQuery text highlighter plugins on Sitepoint compares popular highlighter plugins. This includes plugins of answers from this question.

mark.js 是用纯JavaScript编写的此类插件，但也可用作jQuery插件.与其他插件相比，它提供了更多的机会，并提供以下选项:

mark.js is such a plugin that is written in pure JavaScript, but is also available as jQuery plugin. It was developed to offer more opportunities than the other plugins with options to:

• 单独搜索关键字而不是整个字词
• 地图变音符号(例如，如果"justo"也应匹配justò")
• 忽略自定义元素中的匹配项
• 使用自定义突出显示元素
• 使用自定义突出显示类
• 映射自定义同义词
• 也在iframe中搜索
• 接收未找到的条款

演示

DEMO

或者，您可以看到此小提琴.

用法示例:

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

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

这是我在GitHub上开发的免费开放源代码(项目参考).

It's free, open-source developed by me on GitHub (project reference).

这篇关于搜索和使用JQuery突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！