我的应用程序是文档查看器/阅读器。有一个搜索功能，用户可以在其中输入字符串，然后返回结果列表。此外，查询的出现会在页面上突出显示，以使其更加可见。搜索“类”，“样式”或其他也是html标签的词时会发生此问题。
content 只是这样的html字符串： "<div class='classname' style='stylename'>Words that are eligible for highlighting</div>
突出显示的单词应这样替换：
query = 'class'
"<div class='classname' style='stylename'>Words that are eligible for highlighting are in here, including words like class and style</div>
当应用程序尝试突出显示这些单词时，页面上的所有格式都会中断。这是我用来突出显示搜索查询的代码：
searchContent(content){
var searchQuery = SearchStore.getQuery()
if (searchQuery) {
var query = searchQuery.split(' ').map((q) => {
if (q.length > 2) {
return `\\b${q}\\b`;
}
}).join('|');
if (query.length > 0) {
//this is where the query is highlighted. It should not replace text inside <> tags
content = content.replace(new RegExp(query, 'gi'), (value) => {
return `<b style="background-color: yellow;">${value}</b>`;
});
}
}
return content;
}
有没有办法重写它，以便它检测何时替换html标签中的文本并防止页面损坏？
从最基本的意义上讲，您可以通过标签和字符串进行正则表达式，并且只能对字符串进行替换。下面是简单的正则表达式，它假定标记在<和>之间。
var content = document.getElementById('content');
var html = content.innerHTML;
html = html.replace(/<[^>]*>|[^<>]*/g, function(m){
// this is a tag, no replace
if (m.charAt(0) === '<') {
return m;
}
// this is not a tag, do replacement
return m.replace(/class/g, function(m) {
return "<span class='match'>" + m + "</span>"
});
});
content.innerHTML = html;b.test {
color: #009999;
background-color: white;
}
b {
color: white;
background-color: #009999;
}
span.match {
color: blue;
background-color:white;
}<div id='content'>
<b class='test'>class test</b>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句