如何为字符串变量中的指定内容动态包裹HTML标签？

现有如下变量：

let display_text = "Cats are pawsome!"

希望将其处理后渲染为：

<div>
  <b>Cats</b> are pawsome!
</div>

简言之，要给字符串中所有出现“Cats”的位置，动态包裹指定的HTML标签。

解决方案 #

用JavaScript的replace方法配合正则表达式就能实现全局替换，代码示例如下：

let display_text = "Cats are pawsome! Cats are cute!";
// 全局匹配所有"Cats"并包裹<b>标签
let formattedText = display_text.replace(/Cats/g, '<b>Cats</b>');
// 拼接外层div标签得到最终结构
let result = `<div>
  ${formattedText}
</div>`;

console.log(result);

补充说明 #

• 正则里的g是全局匹配标识，能替换字符串里所有的"Cats"，而非仅第一个；
• 如果需要忽略大小写匹配（比如匹配"cats""CATS"），可以把正则改成 /Cats/gi；
• 最后将处理后的文本和外层<div>拼接，就能得到目标HTML结构。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture