Question

我有这段代码来突出显示数组中存在的单词，但一切正常，除非它不突出显示包含'。'的单词。

spansR[i].innerHTML = t[i].replace(new RegExp(wordsArray.join("|"),'gi'), function(c) {
                return '<span style="color:red">'+c+'</span>';
            });

我还尝试了每个单词中的点号

 for(var r=0;r<wordsArray.length;r++){
               if(wordsArray[r].includes('.')){
                 wordsArray[r] = wordsArray[r].replace(".", "\\.");
                  wordsArray[r] = '\\b'+wordsArray[r]+'\\b';
              }
           }

我也尝试用这些替换，而没有一个替换为“ replace（”。“，” \。“）”，“ replace（”。“，” \。“）”，“ replace（”。“ ，“ /。”）“，” replace（'。'，'/。'）“，” replace（'。'，'/。'）“。

这是一个简化的测试用例（我想匹配“免费”。）

    <!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var re = "\\bfree\\.\\b";
  var str = "The best things in life are free.";
  var patt = new RegExp(re);
  var res = patt.test(str);
  document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>

Answer 1

这是您的解决方案：

替换此：

new RegExp(wordsArray.join("|"),'gi')

与此：

new RegExp(wordsArray.join("|"),'gi').replace(/\./g,'\\.')

示例：

['javascript', 'firas.', 'regexp'].join("|").replace(/\./g,'\\.')

将打印

javascript|firas\.|regexp

您要查找的正则表达式带有转义点。它会与firas.相匹配，但与您在上一条评论中特别要求的firas不相符

Answer 2

在JavaScript中实现明确的单词边界。

这是不支持ECMAScript 2018及更高版本的JS版本：

var t = "Some text... firas and firas. but not firass ... Also, some shop and not shopping";
var wordsArray = ['firas', 'firas.', 'shop'];
wordsArray.sort(function(a, b){
  return b.length - a.length;
});
var regex = new RegExp("(^|\\W)(" + wordsArray.map(function(x) {
  return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
}).join("|") + ")(?!\\w)",'gi');
console.log( t.replace(regex, '$1<span style="color:red">$2</span>') );

此处，正则表达式将类似于/(^|\W)(firas\.|firas|shop)(?!\w)/gi，请参见demo。 (^|\W)捕获到字符串1或非单词char的组1（$1）的开头，然后有第二个捕获组将所讨论的术语归类，并且(?!\w)否定的前瞻匹配一个位置，该位置不会立即跟着单词char。

wordsArray.sort很重要，因为没有它，具有相同开头的较短的单词可能会在较长的单词出现之前“获胜”。

.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')是必不可少的搜索词中的特殊字符。

支持后向支持的JS环境的变体：

let t = "Some text... firas and firas. but not firass ... Also, some shop and not shopping";
let wordsArray = ['firas', 'firas.', 'shop'];
wordsArray.sort((a, b) => b.length - a.length );
let regex = new RegExp(String.raw`(?<!\w)(?:${wordsArray.map(x => x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join("|")})(?!\w)`,'gi');
console.log( t.replace(regex, '<span style="color:red">$&</span>') );

正则表达式将类似于/(?<!\w)(?:firas\.|firas|shop)(?!\w)/gi，请参见demo。在这里，(?<!\w)的负向后搜索匹配的位置不是单词char紧随其后。这也使捕获组变得多余，我将其替换为非捕获组(?:...)，并且替换模式现在仅包含一个占位符$&，可插入整个匹配项。

仅以SPAN标签

2 个答案: