【发布时间】：2016-09-23 08:02:59
【问题描述】：
我需要在搜索文本周围添加高亮类。但是其他的html标签挡住了我的路。这是一个例子：
开始于：
<div class="source">your <b><i>text</i></b> using <a href="#">regex ignoring html</a> tags</div>
然后我搜索：text using regex
预期结果（在本例中，我将使用span 突出显示）：
<div class="source">your <b><i><span>text</span></i></b><span> using </span><a href="#"><span>regex</span> ignoring html</a> tags</div>
我对此有解决方案，但它需要特定的正则表达式来搜索忽略内部 html 标签的文本。 如果有下面提出的解决方案，我愿意提供建议。而且它不必用 vanilla js 编写。以下是我当前解决方案的简化版本，缺少提及的正则表达式。
由于缺少正则表达式，下面的示例不起作用
var source = document.querySelector('.source').innerHTML; // html from example
var text = 'text using regex'; // what we searching for
var htmlTag = new RegExp('(<\\/?([a-z]+)([^<]+)*(?:>))+', 'g'); // find html tags
var missingRegExp = new RegExp('', 'i'); // << missing regex
// Wrap searched text with span tag
var result = source.replace(missingRegExp, function (searchedText) {
// Wrap html tags inside searched text with span tag
searchedText = searchedText.replace(htmlTag, function (match) {
return '</span>' + match + '<span>';
});
return '<span>' + searchedText + '</span>';
});
console.log('Result: ' + result);
在这种情况下，删除 html 标记不是一种选择。
【问题讨论】：
-
不要重新发明轮子，试试mark.js
-
改用
var source = document.querySelector('.source').textContent。 -
@dude 我会试试 mark.js。因为当我查看示例时，没有什么看起来像我的问题。但也许我需要调整一些选项。谢谢老兄。
-
@zer00ne 好的 textContent。但接下来呢？我需要从里面有标签。看例子。
-
.textContent是没有标签的文本。不需要正则表达式，这是建议而不是答案，因此在 cmets 中而不是在答案中。
标签： javascript jquery html regex