突出显示 HTML 文本中的单词(但不是标记）

Highlight word in HTML text (but not markup)

本文关键字：单词 显示 HTML 文本      更新时间：2023-09-26

我试图突出显示正文中的所有匹配单词，但不突出显示任何html标签中的单词。例如，给出的关键字是"para"。这是一段：

<p class="para"> Example of paragraph. Lorem ipsum dolor sit amet. </p>

导致：

<p class="para">
Example of <strong>para</strong>graph. Lorem ipsum dolor sit amet.
</p>

我知道这在 JavaScript replace() 中是可能的，但我对正则表达式了解不多。

演示：http://jsfiddle.net/crgTU/7/

highlightWord(document.body,'para');
function highlightWord(root,word){
  textNodesUnder(root).forEach(highlightWords);
  function textNodesUnder(root){
    var n,a=[],w=document.createTreeWalker(root,NodeFilter.SHOW_TEXT,null,false);
    while(n=w.nextNode()) a.push(n);
    return a;
  }
  function highlightWords(n){
    for (var i; (i=n.nodeValue.indexOf(word,i)) > -1; n=after){
      var after = n.splitText(i+word.length);
      var highlighted = n.splitText(i);
      var span = document.createElement('span');
      span.className = 'highlighted';
      span.appendChild(highlighted);
      after.parentNode.insertBefore(span,after);
    }
  }
}
​

您也可以考虑调用类似...

function removeHighlights(root){     
  [].forEach.call(root.querySelectorAll('span.highlighted'),function(el){
    el.parentNode.replaceChild(el.firstChild,el);
  });
}

。在查找新突出显示之前（从 DOM 中删除旧突出显示）。

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

从头开始

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

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

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

使用现有插件

使用现有的、实现良好的插件时，您不必担心上述命名的内容。Sitepoint 上的 10 jQuery 文本荧光笔插件文章比较了流行的荧光笔插件。

看看马克.js

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

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

演示

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

使用示例：

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

它是免费且在GitHub上开发的开源（项目参考）。

您可以使用正则表达式方式，但它不会突出显示多个标签。对于考生，"我的亮点"字样不会突出显示。

这是代码：

str='<img src="brown fox.jpg" title="The brown fox" />'
    +'<p>some text containing fox. And onother fox.</p>'
var word="fox";
word="(''b"+ 
    word.replace(/([{}()[']''.?*+^$|=!:~-])/g, "''$1")
        + "''b)";
var r = new RegExp(word,"igm")
str.replace(/(>[^<]+)/igm,function(a){
    return a.replace(r,"<span class='hl'>$1</span>");
})
相关文章：