替换 html 标签内的单词答案

【问题标题】：Replacing words that are inside html tags替换 html 标签内的单词
【发布时间】：2016-01-08 22:53:42
【问题描述】：

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

【问题讨论】：

标签： javascript html reactjs

【解决方案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>

【讨论】：

这最终成为一个可行的解决方案。在我的例子中，content 是要匹配的字符串，而不是 html。谢谢。

【解决方案2】：

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

/<([\w]+)[^>]*>(.*?)<\/\1>/

【讨论】：