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

聖光之護 2026-01-07 00:00:00 次阅读

本文介绍如何通过 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。