在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, '\\$&')。

Answer 2

我觉得这个语法更直观一点，将函数作为replace的第二个参数传递（更多信息：function as argument，regex escaping search terms）：

const reEscape = searchTerm => (
  searchTerm.replace(/[-{}()[/*+?.^$|\]\\]/g, "\\$&")
);

const addSpan = $1 => `<span>${$1}</span>`;

const focusSearchValue = (data, value) => {
  const regex = new RegExp(`${reEscape(value)}`, 'ig');
  return data.replace(regex, addSpan);
};

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