如何将pre标签内的和弦文本替换为strong标签实现加粗效果

开发者阿泽

2026-10-5

问题根因

你遇到的问题由两个常见错误共同导致：

替换字符串时用了HTML实体编码的<和>，这两个字符会被浏览器识别为普通的尖括号文本，不会被解析为HTML标签的开头和结尾
即使生成了正确的HTML结构字符串，前端框架默认的文本渲染逻辑会自动转义HTML标签防止XSS攻击，需要调用框架提供的原生HTML渲染API才能正常解析标签

解决步骤

1. 修改正则替换逻辑

把替换规则里的转义尖括号改为正常尖括号，直接生成标准HTML标签：

const boldLyrics = lyrics?.replace(
    /(\b([CDEFGAB](?:b|bb)*(?:#|##|sus|maj|min|m|aug)*[\d\/]*(?:[CDEFGAB](?:b|bb)*(?:#|##|sus|maj|min|m|aug)*[\d\/]*)*)(?=\s|$)(?! \w))/gm,
    `<strong>$1</strong>`
);

2. 调整渲染方式，让浏览器解析HTML标签

根据你使用的技术栈选择对应方案：

原生JavaScript：使用innerHTML属性赋值，不要用innerText/textContent
```
document.querySelector('pre').innerHTML = boldLyrics
```
Vue框架：使用v-html指令渲染内容
```
<pre v-html="boldLyrics"></pre>
```
React框架：使用dangerouslySetInnerHTML属性渲染内容
```
<pre dangerouslySetInnerHTML={{__html: boldLyrics}} />
```