时间戳

首页 > 解决方案 > 如何包装包含在方括号内的内容，在所有出现的情况下使用字符串中的 span 标签全局？

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

问题描述

我需要在字符串中突出显示文本内容，该文本内容包含在方括号之间。内容不止一次出现。为此，我需要将其包装在带有某个类的 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);

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

标签： javascript

解决方案

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

在另一种情况下，如果您有另一个捕获组，则替换将$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>

推荐阅读