gpt4 book ai didi

javascript - 使用忽略 html 标签的正则表达式搜索文本

转载 作者:行者123 更新时间:2023-11-28 10:47:51 26 4
gpt4 key购买 nike

我需要在搜索文本周围添加突出显示类。但其他 html 标签妨碍了我。这是一个例子:

开头为:

<div class="source">your <b><i>text</i></b> using <a href="#">regex ignoring html</a> tags</div>

我搜索:使用正则表达式的文本

预期结果(在本例中我将使用 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 的字符串。您应该关心中间空格并用适当的正则表达式替换它们以匹配 HTML 标签,但首先您需要将每个单词括在括号中:

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

下一步是用正则表达式替换空格:((?:\s*(?:<\/?\w[^<>]*>)?\s*)*)所以我们最后修改的版本应该是:

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

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

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

现在您已经编译了正则表达式版本和替换字符串,.replace()方法将成功结束他们。

<强> Live demo

关于javascript - 使用忽略 html 标签的正则表达式搜索文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39655712/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com