将 replace() 函数中的 $& 传递给另一个函数

Question

此代码将获取 str 并将每个单词放在 <span> 中。我想添加一些功能，所以会突出显示一些单词，但无法弄清楚如何将 $& （这是一个单词）传递给 highLight 函数。现在我已经写了{$&}，但它不起作用。

str = "Adam Sandler"
const highLight = (param) => {
 conosle.log(param)
}

const wrapWordsInSpan = (str) => {
   const addedSpanToText = str.replace(
     /\w+/g,
     `<span id="text-container" style="color: ${highLight(`{$&}`)}"}>$&</span>`
   );

Answer 1

你真的很接近，但如果你想动态使用该值（例如，调用highlight），你必须将一个函数作为第二个参数传递给replace，像这样：

const wrapWordsInSpan = (str) => {
    const addedSpanToText = str.replace(
       /\w+/g,
       match => `<span id="text-container" style="color: ${highLight(match)}"}>${match}</span>`
    );
    return addedSpanToText;
};

match => `<span id="text-container" style="color: ${highLight(match)}"}>${match}</span>` 部分是函数。它使用匹配的文本作为参数调用（相当于字符串中的$& 标记），我在上面调用了match（捕获组值是后续参数，详细信息on MDN）。它返回的内容被用作替换：

const wrapWordsInSpan = (str) => {
    const addedSpanToText = str.replace(
       /\w+/g,
       match => `<span id="text-container" style="color: ${highLight(match)}"}>${match}</span>`
    );
    return addedSpanToText;
};

const highLight = (param) => {
    return param === "Adam" ? "green" : "black";
};

const str = "Adam Sandler"

console.log(wrapWordsInSpan(str));