Javascript 替换html标记中的单词

我的应用程序是一个文档查看器/阅读器。有一个搜索函数，用户在其中输入字符串并返回结果列表。此外，查询的出现在页面上高亮显示，以使其更可见。当搜索诸如“类”、“样式”或其他同样是html标记的词时，会出现此问题

内容

就是这样的一个html字符串：

“可以突出显示的单词

突出显示的单词应按如下方式替换：

query='class'

“此处有资格突出显示的单词，包括class和style等单词

当应用程序试图突出显示这些单词时，页面上的所有格式都会中断。这是我用来突出显示搜索查询的代码：

 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;
}

searchContent（内容）{
var searchQuery=SearchStore.getQuery（）
如果（搜索查询）{
var query=searchQuery.split（“”）.map（（q）=>{
如果（q.长度>2）{
返回“\\b${q}\\b”；
}
}).加入（“|”）；
如果（query.length>0）{
//这是突出显示查询的地方。它不应替换标记内的文本
content=content.replace（新的RegExp（查询，'gi'），（值）=>{
返回`${value}`；
});
}
}
返回内容；
}

---

有没有办法重写它，以便它能够检测何时替换html标记内的文本，并防止页面中断？

也许可以使用在标记内扫描的正则表达式：

---

/]*>（.**？/

最基本的意义是，您可以通过标记和字符串进行正则表达式，并且只能对字符串进行替换。下面是一个简单的正则表达式，它假设标记是<和>

var content=document.getElementById（'content'）；
var html=content.innerHTML；
html=html.replace（/]*>|[^]*/g，函数（m）{
//这是一个标签，不能替换
如果（m.charAt（0）==”这是一个可行的解决方案。在我的例子中，
内容
是匹配的字符串，而不是
html
。谢谢。