如何使用正则表达式将字符串中方括号内的文本替换为加粗 HTML 标签

本文介绍如何利用 javascript 的 `replace()` 方法配合正则表达式，精准匹配并高亮（加粗）字符串中所有被英文方括号 `[]` 包裹的动态内容，并强调 html 转义等关键安全实践。

在前端开发中，常需对动态生成的文本进行轻量级格式化——例如将 [关键词] 自动渲染为 关键词。实现这一效果的核心在于：准确提取方括号内的内容，并安全地包裹为 HTML 标签。

以下是一段简洁可靠的解决方案：

const rawString = '[Number] years of practice in accounting and financial administration. Showcased skills in [Area of Expertise]';

// ✅ 安全做法：先对原始字符串做 HTML 转义（防止 XSS），再执行替换
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, '&')
    .replace(//g, 'youjiankuohaophpcn')
    .replace(/"/g, '"')
    .replace(/'/g, ''');
}

const escaped = escapeHtml(rawString);
const html = escaped.replace(/\[([^\]]+)\]/g, '$1');

console.log(html);
// 输出：
// Number years of practice in accounting and financial administration. Showcased skills in Area of Expertise

? 正则说明：/\[([^\]]+)\]/g \[ 和 \] 匹配字面量 [ 和 ]（需转义）； ([^\]]+) 捕获一个或多个非 ] 字符（即括号内内容）； g 标志确保全局替换，处理所有匹配项； $1 引用第一个捕获组，即方括号中的纯文本。

⚠️ 重要注意事项：

• ❌ 切勿直接将用户输入或动态字符串插入 DOM（如 element.innerHTML = html），否则可能引发 XSS 攻击；
• ✅ 务必优先 HTML 转义（如上例 escapeHtml() 函数），再执行格式化；
• ? 推荐使用 替代 ，语义更清晰（强调内容而非仅视觉加粗）；
• ? 若需支持嵌套或转义括号（如 \[[test]]），需升级为更复杂的解析逻辑，基础场景此正则已足够健壮。

总结：该方法轻量、可复用、符合 Web 安全最佳实践，适用于简历摘要、富文本预览、模板引擎等常见业务场景。