javascript - 如何包装包含在方括号内的内容，在所有出现的字符串中全局使用 span 标记？

Question

我需要突出显示字符串中包含在方括号之间的文本内容。内容不止一次出现。为此，我需要将其包装在带有某个类的 span 标记中，以全局突出显示方括号 [] 内包装的所有内容。

我的字符串如下所示

let str = "<p>[If you no] longer wish to receive emails [from this sender] , pleas?ick here and confirm your [request] .</p>";

预期的结果是

let str = "<p><span class="highlight">[If you no]</span> longer wish to receive emails <span class="highlight">[from this sender]</span> , pleas?ick here and confirm your <span class="highlight">[request]</span> .</p>";

目前我的做法是这样的

let str = "<p>[If you no] longer wish to receive emails [from this sender] , pleas?ick here and confirm your [request] .</p>"
let matched = str.match(/\[(.*?)\]/g);
let someString=matched.map(element=> 
       str.replace(element,`<span class="highlight">${element}</span>`)
      )
      console.log(someString);

如果这种方法是错误的，那么请提供一些解决此问题的最佳方法。提前致谢。

Answer 1

替换中的 $1 将用于注入(inject)模式中第一组中捕获的元素。

在另一种情况下，如果您有另一个捕获组，则替换为 $2

MDN - RegExp.$1-$9

let str = "<p>[If you no] longer wish to receive emails [from this sender] , pleas?ick here and confirm your [request] .</p>"
let pattern = /\[(.*?)\]/g
str = str.replace(pattern,'<span class="highlight">[$1]</span>')
console.log(str)
document.getElementById('result').innerHTML = str

.highlight {
background: yellow;
}

<div id="result"></div>