Question

我正在开发一个自动填充组件，它突出显示搜索文本的所有发生情况。我所做的是通过单词爆炸输入文本，并将这些单词的每个出现包装成一个

我的代码看起来像这样

inputText = 'marriott st';
text = "Marriott east side";
textSearch = inputText.split(' ');
for (var i in textSearch) {
  var regexSearch = new RegExp('(?!<\/?strong>)' + textSearch[i]), "i");
  var textReplaced = regexSearch.exec(text);
  text = text.replace(regexSearch, '< strong>' + textReplaced + '< /strong>');
}

例如，鉴于结果：“marriott east side”

输入文字：“marriott st”

我应该

  <strong>marriot< /strong > ea < strong >st < /strong > side

我正在接受

  <<strong>st</strong>rong>marriot</<strong>st </strong>rong>ea<<strong>st</strong> rong>s</strong> side

任何想法如何才能改进我的正则表达式，以避免html标签内部出现错误？感谢

   /(?!<\/?strong>)st/

Answer 1

我会在一次传递中处理字符串。您可以从搜索字符串中创建一个正则表达式：

var search_pattern = '(' + inputText.replace(/\s+/g, '|') + ')';
// `search_pattern` is now `(marriot|st)`
text = text.replace(RegExp(search_pattern, 'gi'), '<strong>$1</strong>');

DEMO

您甚至可以先拆分搜索字符串，按长度对字词进行排序并合并，以便为更长的匹配提供更高的优先级。

你绝对应该在字符串中转义特殊的正则表达式字符：How to escape regular expression special characters using javascript?。

Answer 2

在每次搜索之前，我建议每次都要获取（或保存）原始搜索字符串。例如，在您当前的情况下，这意味着您可以替换所有'＆lt; strong＆gt;'和'＆lt; / strong＆gt;'带''的标签。这将有助于保持您的regEx简单，特别是如果您决定在将来添加其他html标记和格式。

正则表达式替换html标记之外的文本

2 个答案: