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

在最基本的意义上，你可以通过标签和字符串进行正则表达式，并且只对字符串进行替换。下面是简单的正则表达式，假设标签是＆lt;和＆gt;。

＆＃13;

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;

＆＃13;

b.test {
  color: #009999;
  background-color: white;
}

b {
  color: white;
  background-color: #009999;
}

span.match {
  color: blue;
  background-color:white;
}

＆＃13;

<div id='content'>
  <b class='test'>class test</b>
</div>

＆＃13;

Answer 2

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

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

替换html标记内的单词

2 个答案: