本文介绍如何利用 javascript 的 `replace()` 方法配合正则表达式，精准匹配并高亮（加粗）字符串中所有被英文方括号 `[]` 包裹的动态内容，并强调 html 转义等关键安全实践。
在前端开发中，常需对动态生成的文本进行轻量级格式化——例如将 [关键词] 自动渲染为 关键词。实现这一效果的核心在于：准确提取方括号内的内容，并安全地包裹为 HTML 标签。
以下是一段简洁可靠的解决方案：
const rawString = '[Number] years of practice in accounting and financial administration. Showcased skills in [Area of Expertise]';
// ✅ 安全做法：先对原始字符串做 HTML 转义（防止 XSS），再执行替换
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
const escaped = escapeHtml(rawString);
const html = escaped.replace(/\[([^\]]+)\]/g, '<strong>$1</strong>');
console.log(html);
// 输出：
// <strong>Number</strong> years of practice in accounting and financial administration. Showcased skills in <strong>Area of Expertise</strong>? 正则说明：/\[([^\]]+)\]/g \[ 和 \] 匹配字面量 [ 和 ]（需转义）； ([^\]]+) 捕获一个或多个非 ] 字符（即括号内内容）； g 标志确保全局替换，处理所有匹配项； $1 引用第一个捕获组，即方括号中的纯文本。
⚠️ 重要注意事项：
- ❌ 切勿直接将用户输入或动态字符串插入 DOM（如 element.innerHTML = html），否则可能引发 XSS 攻击；
- ✅ 务必优先 HTML 转义（如上例 escapeHtml() 函数），再执行格式化；
- ? 推荐使用 替代 ，语义更清晰（强调内容而非仅视觉加粗）；
- ? 若需支持嵌套或转义括号（如 \[[test]]），需升级为更复杂的解析逻辑，基础场景此正则已足够健壮。
总结：该方法轻量、可复用、符合 Web 安全最佳实践，适用于简历摘要、富文本预览、模板引擎等常见业务场景。
立即学习“前端免费学习笔记（深入）”；
