如何利用正则实现 JavaScript 动态变量注入？-js教程-PHP中文网

javascript无原生动态变量注入，需用正则匹配占位符（如{{name}}），再通过作用域对象安全取值实现模板插值，禁用eval和with以防xss与安全风险。

如何利用正则实现 javascript 动态变量注入？

JavaScript 中没有原生的“动态变量注入”机制，但可以通过正则表达式解析字符串模板，再结合 eval、Function 构造器或更安全的 with 替代方案（如作用域对象查找）来实现类似效果。关键不在于“注入变量”，而在于**安全地将字符串中的占位符替换为运行时变量值**。

识别模板中的变量占位符

常见模板语法有 {{name}}、${name}、[:name] 等。用正则精准匹配是第一步：

/\{\{(\w+)\}\}/g 匹配 {{user}}，捕获组 $1 是变量名
/\$\{(\w+)\}/g 匹配 ${id}（注意 $ 和 { 需转义）
若允许多级属性（如 {{user.profile.name}}），需更复杂正则或改用词法分析，不建议纯正则处理嵌套

用 replace + 回调函数做安全替换

避免 eval，把变量存在一个普通对象中，通过字符串路径安全取值：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

function interpolate(str, scope = {}) {
  return str.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return scope[key] !== undefined ? scope[key] : match;
  });
}
<p>// 使用
const template = "Hello {{name}}, you have {{count}} messages.";
const result = interpolate(template, { name: "Alice", count: 5 });
// → "Hello Alice, you have 5 messages."
</p>

支持点号路径（如 {{user.age}}）

简单扩展取值逻辑，用 key.split('.').reduce() 安全遍历：

function get(obj, path) {
  return path.split('.').reduce((o, k) => (o && o[k] !== undefined ? o[k] : undefined), obj);
}
<p>function interpolateDeep(str, scope = {}) {
return str.replace(/{{([\w.]+)}}/g, (match, key) => {
const val = get(scope, key);
return val !== undefined ? val : match;
});
}</p><p>// 使用
const data = { user: { name: "Bob", age: 30 } };
interpolateDeep("{{user.name}} is {{user.age}}", data);
// → "Bob is 30"
</p>