用正则表达式标记字符串中的文本，但不包括链接

mark text in a string with regular expression but exclude links

本文关键字：文本 不包括 链接 正则表达式 字符串      更新时间：2023-09-26

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

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中的搜索词也被标记标签包装，它破坏了链接。

如何排除由标记标签包装的链接?

使用负前向来添加一个额外的约束，即在没有<的情况下，术语后面不能跟一个>。这将有效地排除<…

>标记。
var pattern = new RegExp('('+term+')(?![^<]*>)', 'gi');
https://jsfiddle.net/qdk80o0k/

  1. 你在倒车
  2. 使用innerHTML将破坏事件
  3. 使用innerHTML将触发DOM的再生

为了让事情变得简单，你应该使用一个现有的插件。那里有许多jQuery插件，但由于您没有添加jquery标记，我假设您正在搜索纯JS解决方案。那么唯一的插件就是mark.js。

的例子,你的用例

相关文章：