如何使用JavaScript基于数组内容注入<br>标签且不破坏原有HTML结构

核心思路是通过正则零宽断言精准定位<span>标签的内部文本区间，仅对该区间内的内容做替换，完全不会影响标签外的首单词Hello，也不会修改原有标签结构：

const rawStr = 'Hello people. `<span>`Hello to everyone`</span>`';
const array = ['Hello', 'to everyone'];

const res = rawStr.replace(/(?<=<span>`)([^`]+)(?=`</span>)/, () => {
  return `${array[0]} \`<br>\` ${array[1]}`;
});

console.log(res);
// 输出结果：'Hello people. `<span>`Hello `<br>` to everyone`</span>`'

逻辑说明 #

• 正则(?<=<span>)是后置断言，匹配后的文本起始位置，(?=</span>)是前置断言，匹配</span>前的文本结束位置，两个断言限定的区间就是span标签包裹的文本，只会对这部分内容做处理
• 替换逻辑直接按照数组元素拼接<br>标签，精准命中注入位置，不会出现全局误替换的问题

内容的提问来源于stack exchange，提问作者Zain