本文介绍如何用 javascript 正则表达式精准匹配并高亮字符串中方括号 `[...]` 内的文本，将其转换为 `` 标签包裹的加粗 html 片段，并强调 html 转义等安全实践。
在动态渲染文本内容（如简历摘要、用户输入预览或富文本片段）时，常需对特定标记语法（如 [关键词]）进行格式化处理。一个典型需求是：将所有形如 [Text] 的子串自动转为加粗效果（即 Text），同时保留其余文本不变。
实现该功能的核心在于正则匹配 + 安全替换。以下是一段简洁可靠的代码示例：
const s = '[Number] years of practice in accounting and financial administration. Showcased skills in [Area of Expertise]'; // 使用正则提取方括号内非 ] 字符组成的捕获组，并替换为 <b>...</b> const html = s.replace(/\[([^\]]+)\]/g, '<b>$1</b>'); console.log(html); // 输出： // <b>Number</b> years of practice in accounting and financial administration. Showcased skills in <b>Area of Expertise</b>
✅ 正则说明：
- \[ 和 \] 分别匹配字面量 [ 和 ]（需转义）；
- ([^\]]+) 是关键捕获组：[^\]] 表示“非右括号字符”，+ 表示一个或多个，整体即匹配 [ 与 ] 之间所有不含 ] 的内容；
- /g 标志确保全局替换（处理多个匹配项）；
- $1 引用第一个捕获组内容，实现精准提取与替换。
⚠️ 重要安全提醒：
若该 HTML 字符串将直接插入 DOM（如 element.innerHTML = html），必须先对原始字符串做 HTML 转义，防止 XSS 攻击。例如：[<script>alert(1)</script>] 若未转义，会导致脚本执行。推荐使用 DOMPurify 库或手动转义函数（如 textContent 创建临时元素提取纯文本），或优先采用 textContent + 元素构造等更安全的 DOM 操作方式。
? 进阶建议：
立即学习“前端免费学习笔记（深入）”；
- 如需支持嵌套或转义括号（如 \[escaped\]），正则需升级为更复杂的解析逻辑（建议改用状态机或专用解析器）；
- 若目标环境支持，可选用 替代 以增强语义化；
- 在 React/Vue 等框架中，应避免 dangerouslySetInnerHTML，转而用组件化方式动态渲染加粗节点。
掌握这一模式，你便能灵活实现基于标记语法的轻量级文本富化，兼顾功能性与安全性。
