使用正则表达式标记字符串中的文本但排除链接

Question

我有一个文本，我希望当用户搜索一个术语时，该术语会通过用术语标记包装来突出显示。

javascript来包装匹配词：

var sampleText = window.document.getElementById('test').innerHTML;
var _keywordHighlight = function (text, term) {
  var pattern = new RegExp('('+term+')', 'gi');
  text = text.replace(pattern, '<mark>$1</mark>');;
  return text;
};

var newText = _keywordHighlight(sampleText, 'sample');
window.document.getElementById('test').innerHTML = newText;

jsfiddle.net链接：

https://jsfiddle.net/homa/j0Lgk6pf/

问题是，url中的搜索词也包含了mark标记，它打破了链接。

如何排除要用标记标记包装的链接？

Answer 1

使用否定前瞻添加额外约束，该术语未跟随＆gt;没有先得到＆。这将有效地排除＆lt; ...＆gt;中的匹配。标记。

var pattern = new RegExp('('+term+')(?![^<]*>)', 'gi');

https://jsfiddle.net/qdk80o0k/

Answer 2

1. 你正在重新转动方向盘
2. 使用innerHTML会破坏事件
3. 使用innerHTML将触发DOM的重新生成

为了简化这一点，您应该使用现有的插件。有许多jQuery插件，但由于你还没有添加jquery标签，我认为你正在寻找一个普通的JS解决方案。然后唯一的插件是mark.js。

Example of your use case