如何使用正则表达式将字符串中方括号内的内容加粗（HTML 格式）

本文介绍如何通过 javascript 正则表达式精准匹配并替换字符串中所有 `[…]` 包裹的文本，将其转换为 `…` 加粗 html 片段，并强调对动态内容进行 html 转义以防范 xss 风险。

在前端开发中，常需对动态生成的文本做轻量级格式化处理，例如将标记语法（如 [Term]）渲染为加粗效果。核心思路是：用正则提取方括号内非]字符的内容，并替换为 HTML 加粗标签。

以下是一段简洁可靠的实现：

function boldBracketed(text) {   // 先对原始文本做基础 HTML 转义（防 XSS），再执行替换   const escapeHtml = (str) =>      str.replace(/[&<>"'`]/g, (char) => {       const escapeMap = { '&': '&', '<': 'zuojiankuohaophpcn', '>': 'youjiankuohaophpcn', '"': '"', "'": ''', '`': '`' };       return escapeMap[char];     });    const escaped = escapeHtml(text);   // 匹配 [任意非 ] 字符]+（支持连续多个 ] 的健壮写法，但通常单个 ] 即可）   return escaped.replace(/[([^]]+)]/g, '$1'); }  // 示例使用 const input = '[Number] years of practice in accounting and financial administration. Showcased skills in [Area of Expertise]'; const output = boldBracketed(input); console.log(output); // → Number years of practice in accounting and financial administration. Showcased skills in Area of Expertise

✅ 关键说明：

• 正则 /\[([^]]+)\]/g 中：
  • \[ 和 \] 分别匹配字面量 [ 和 ]（需双反斜杠转义）；
  • ([^]]+) 捕获一个或多个非右括号字符，确保不跨括号匹配；
  • g 标志实现全局替换，处理所有匹配项。
• $1 表示第一个捕获组内容（即括号内文本），避免直接拼接用户输入导致 XSS。
• 务必先转义再替换：若原始字符串来自用户输入或外部 API，跳过 escapeHtml() 将导致

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 该方案适用于纯文本到 HTML 片段的转换，不可直接插入 innerHTML 而不校验；更安全的做法是结合 textContent + span + css 类（如 ），或使用 domPurify.sanitize() 进一步净化。
• 若需支持嵌套括号（如 [A [B] C]），标准正则无法胜任，应改用状态机或专用解析器。

总结：一次正则替换即可完成基础加粗需求，但安全永远优先——动态内容必须转义，再格式化，最后谨慎注入 DOM。