javascript - 在 span 标签中包装动态不敏感字符串

Question

我正在尝试将动态不敏感字符串包装在 span 标记中，但输出中出现了 $1。请帮助我。

     function focusSearchValue(data, value){
        		var regEx = new RegExp((value), "ig");
    			data = data.replace(regEx, "<span class=''>$1</span>"); 
                console.log(data);
       }
    
    focusSearchValue('SharePoint 2016, Team Collaboration Software Tools', 'sharepoint');

Answer 1

value 周围的括号不是模式的一部分，因此，您的正则表达式没有定义捕获组，$1 可以从字符串替换模式中引用。这就是为什么 $1 作为替换结果作为文字字符串传递的原因。

您需要使用 $& 来引用整个匹配项(参见 String#replace "Specifying a string as a parameter" section )，并返回字符串:

function focusSearchValue(data, value){
        var regEx = new RegExp(value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), "ig");
        return data.replace(regEx, "<span class=''>$&</span>");
}

console.log(focusSearchValue('SharePoint 2016, Team Collaboration Software Tools', 'sharepoint'));

由于您将一个变量传递给应该被解析为文字字符串的正则表达式引擎，因此建议转义所有可能充当特殊正则表达式元字符的特殊字符，因此添加了转义 .replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&').