本文介绍如何通过 javascript 正则表达式精准匹配并替换字符串中所有 `[...]` 包裹的文本，将其转换为 `...` 加粗 html 片段，并强调对动态内容进行 html 转义以防范 xss 风险。
在前端开发中，常需对动态生成的文本做轻量级格式化处理，例如将标记语法（如 [Term]）渲染为加粗效果。核心思路是：用正则提取方括号内非]字符的内容，并替换为 HTML 加粗标签。
以下是一段简洁可靠的实现：
function boldBracketed(text) {
// 先对原始文本做基础 HTML 转义（防 XSS），再执行替换
const escapeHtml = (str) =>
str.replace(/[&<>"'`]/g, (char) => {
const escapeMap = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '`': '`' };
return escapeMap[char];
});
const escaped = escapeHtml(text);
// 匹配 [任意非 ] 字符]+（支持连续多个 ] 的健壮写法，但通常单个 ] 即可）
return escaped.replace(/[([^]]+)]/g, '<b>$1</b>');
}
// 示例使用
const input = '[Number] years of practice in accounting and financial administration. Showcased skills in [Area of Expertise]';
const output = boldBracketed(input);
console.log(output);
// → <b>Number</b> years of practice in accounting and financial administration. Showcased skills in <b>Area of Expertise</b>✅ 关键说明：
- 正则 /\[([^]]+)\]/g 中：
- \[ 和 \] 分别匹配字面量 [ 和 ]（需双反斜杠转义）；
- ([^]]+) 捕获一个或多个非右括号字符，确保不跨括号匹配；
- g 标志实现全局替换，处理所有匹配项。
- $1 表示第一个捕获组内容（即括号内文本），避免直接拼接用户输入导致 XSS。
- 务必先转义再替换：若原始字符串来自用户输入或外部 API，跳过 escapeHtml() 将导致 <script> 等恶意代码被执行。</script>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 该方案适用于纯文本到 HTML 片段的转换，不可直接插入 innerHTML 而不校验；更安全的做法是结合 textContent + span + CSS 类（如 ），或使用 DOMPurify.sanitize() 进一步净化。
- 若需支持嵌套括号（如 [A [B] C]），标准正则无法胜任，应改用状态机或专用解析器。
总结：一次正则替换即可完成基础加粗需求，但安全永远优先——动态内容必须转义，再格式化，最后谨慎注入 DOM。
