正则表达式模板变量替换的核心是安全匹配并替换 {{ key }} 占位符，基础用 /{{(w+)}}/g 全局匹配字母数字键名，通过 replace 回调安全替换未定义字段保留原占位符，避免正则注入与代码执行，扩展支持点号路径或默认值需分离解析逻辑。
用正则表达式做模板变量替换，核心是匹配 {{ key }} 这类占位符，再用对应数据替换。关键在于正则要安全、可扩展，避免误匹配或注入风险。
基础正则匹配与单次替换
最简形式用 /{{(w+)}}/g 匹配双花括号内的字母数字键名。注意加 g 标志实现全局替换，否则只换第一个。
- 用
str.replace(regex, (match, key) => data[key] ?? match)安全替换：未定义字段保留原占位符 - 避免直接拼接用户输入的正则（如
new RegExp(`\{\{(${key})\}\}`)），防止正则注入 - 简单场景下，
w+足够；若需支持点号路径（如{{user.name}}），正则可升级为/{{([w.]+)}}/g，后续用辅助函数解析路径
支持嵌套路径与默认值语法
增强语法如 {{user.profile.avatar || 'default.png'}} 或 {{title | uppercase}} 已超出纯正则能力，但基础变量 + 默认值（{{name || '匿名'}}）可用正则分两步处理。
- 先用
/{{([^}]+)}}/g匹配完整表达式（允许空格、竖线、引号等），再在回调里用更精细逻辑解析 - 对
key || fallback结构，按||分割，左侧取值，为空时返回右侧字面量（需简单 AST 模拟，不执行代码） - 不推荐在正则里硬编码复杂语法——应把解析和执行分离，正则只负责“提取”，逻辑交给 JS 函数
规避常见陷阱
正则模板引擎易出问题的地方不在匹配，而在边界控制和上下文隔离。
- 必须转义用户数据中可能干扰正则的字符（如
{、}），或提前预处理模板字符串 - 禁止在变量值中执行 JS（如
{{alert(1)}}），替换值一律视为字符串，不做eval或Function - 若模板含真实
{{字符（非变量），需约定转义方式，例如用{{表示字面量{
轻量实现示例
几行代码就能跑起来：
function render(tpl, data) {
return tpl.replace(/{{(w+)}}/g, (m, key) =>
key in data ? String(data[key]) : m
);
}
// 使用：render('Hello {{name}}', { name: 'Alice' }) → 'Hello Alice'
需要更多功能时，把正则提取和值获取拆开，比如用 Array.from(tpl.matchAll(/{{(w+)}}/g)) 先收集所有 key，统一校验后再批量替换，更易调试和扩展。
