17370845950

本文介绍如何用 javascript 正则表达式精准匹配并高亮字符串中方括号 `[...]` 内的文本，将其转换为 `` 标签包裹的加粗 html 片段，并强调 html 转义等安全实践。

在动态渲染文本内容（如简历摘要、用户输入预览或富文本片段）时，常需对特定标记语法（如 [关键词]）进行格式化处理。一个典型需求是：将所有形如 [Text] 的子串自动转为加粗效果（即 Text），同时保留其余文本不变。

实现该功能的核心在于正则匹配 + 安全替换。以下是一段简洁可靠的代码示例：

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

// 使用正则提取方括号内非 ] 字符组成的捕获组，并替换为 ...
const html = s.replace(/\[([^\]]+)\]/g, '$1');

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

✅ 正则说明：

• \[ 和 \] 分别匹配字面量 [ 和 ]（需转义）；
• ([^\]]+) 是关键捕获组：[^\]] 表示“非右括号字符”，+ 表示一个或多个，整体即匹配 [ 与 ] 之间所有不含 ] 的内容；
• /g 标志确保全局替换（处理多个匹配项）；
• $1 引用第一个捕获组内容，实现精准提取与替换。

⚠️ 重要安全提醒：
若该 HTML 字符串将直接插入 DOM（如 element.innerHTML = html），必须先对原始字符串做 HTML 转义，防止 XSS 攻击。例如：[] 若未转义，会导致脚本执行。推荐使用 DOMPurify 库或手动转义函数（如 textContent 创建临时元素提取纯文本），或优先采用 textContent + 元素构造等更安全的 DOM 操作方式。

? 进阶建议：

• 如需支持嵌套或转义括号（如 \[escaped\]），正则需升级为更复杂的解析逻辑（建议改用状态机或专用解析器）；
• 若目标环境支持，可选用 替代 以增强语义化；
• 在 React/Vue 等框架中，应避免 dangerouslySetInnerHTML，转而用组件化方式动态渲染加粗节点。

掌握这一模式，你便能灵活实现基于标记语法的轻量级文本富化，兼顾功能性与安全性。