javascript - 替换 html 标签内的单词

Question

我的应用程序是一个文档查看器/阅读器。有一个搜索功能，用户在其中输入一个字符串并返回结果列表。此外，查询的出现在页面上突出显示以使其更加可见。当搜索“class”、“style”或其他同样是 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 标记内的文本并防止页面中断？

Answer 1

在最基本的意义上，您可以通过标签和字符串进行正则表达式，并且只对字符串进行替换。下面是一个简单的正则表达式，假定标记是 < 和 > 之间的任何内容。

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>