5

我正在尝试突出显示正文内的所有匹配单词，但不突出显示任何 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()但我对正则表达式知之甚少。

4

3 回答 3

13

演示：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);
    }
  }
}
​

您也可以考虑调用类似...</p> 

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

…在你去寻找新​​的亮点之前（从 DOM 中删除旧的亮点）。

于 2012-05-24T01:35:46.633 回答
6

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

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

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

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

使用现有插件

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

看看mark.js

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

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

演示

或者你可以看到这个 fiddle。

用法示例：

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

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

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

于 2016-01-19T15:31:13.157 回答
0

您可以使用正则表达式方式，但它不会突出显示多个标签。例如 myhighlight 不会突出显示“我的亮点”。

这是代码：

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>");
})
于 2012-10-19T08:08:19.270 回答