使用忽略html标记的regex搜索文本

Search text using regex that ignore html tags

本文关键字：regex 搜索 文本 html      更新时间：2023-09-26

我需要在搜索的文本周围添加高亮类。但其他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标签里面。如果有其他的解决方案，我愿意听取建议。它不需要写在香草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标签不是一个选项。

您有一个像text using regex这样的字符串。您应该关心中间的空格，并用适当的RegEx替换它们以匹配HTML标签，但首先您需要将每个单词括在括号中:

> '(' + "text using regex".split(' ').join(') (') + ')'
< "(text) (using) (regex)"

下一步是用RegEx: ((?:'s*(?:<'/?'w[^<>]*>)?'s*)*)替换空格，所以我们最后修改的版本应该是:

< "(text)((?:'s*(?:<'/?'w[^<>]*>)?'s*)*)(using)((?:'s*(?:<'/?'w[^<>]*>)?'s*)*)(regex)"

如果我们有3个单词要搜索，那么我们最终总共有5个捕获组(n words -> n + n-1捕获组)，所以你应该基于此创建一个替换字符串。这里我们应该有这样的替换字符串:

<span>$1</span>$2<span>$3</span>$4<span>$5</span>

现在你已经编译了RegEx版本和替换字符串，.replace()方法将成功地结束它们。

现场演示

相关文章：