JS实现替换对象模板中.event系列占位符为对应事件对象值

我来给你梳理一下怎么搞定这个模板占位符替换的需求——这种要在嵌套对象、数组和字符串里动态替换.event.xxx格式占位符的场景，在数据渲染或者事件数据处理里确实很常见。

核心思路 #

我们需要完成这几件关键事情：

• 递归遍历模板的所有层级（包括嵌套对象、数组），确保每个角落的占位符都能被处理到
• 精准识别字符串中的.event开头占位符，不管是整个字符串就是占位符，还是字符串的一部分
• 根据占位符的路径（比如.event.properties.file）从事件对象中取出对应的值，完成替换

完整实现代码 #

// 示例事件对象
const event = {
  id: "evt_12345",
  name: "user_upload",
  properties: {
    file: "report.pdf",
    size: 2048
  }
};

// 待处理的模板数组
const templates = [
  { a:"1", a2: {some:"other Obj"}, a3: ["or","array"], b: ".event.id", b2: "'.event.name' and more strings", },
  { dontKnowKeys: "of where the .event will be in", mightNotBeHere: "no placeholder here", butHereAgain: ".event", andSomeDeep: ".event.properties.file is Full..." }
];

// 根据占位符路径从event对象中取值
function getEventValue(path, eventObj) {
  // 去掉开头的点，把路径拆分成层级数组
  const pathSegments = path.slice(1).split('.');
  // 逐层遍历路径，取出对应值；路径不存在则返回原占位符
  return pathSegments.reduce((current, segment) => {
    return current?.[segment] ?? path;
  }, eventObj);
}

// 递归处理模板中的每个值
function processTemplateValue(value, eventObj) {
  if (typeof value === 'object' && value !== null) {
    if (Array.isArray(value)) {
      // 处理数组：逐个元素递归处理
      return value.map(item => processTemplateValue(item, eventObj));
    } else {
      // 处理对象：逐个键值对递归处理
      const processedObj = {};
      for (const key in value) {
        processedObj[key] = processTemplateValue(value[key], eventObj);
      }
      return processedObj;
    }
  } else if (typeof value === 'string') {
    // 正则匹配所有以.event开头的占位符，支持深层路径
    const placeholderRegex = /\.(event(\.[\w]+)*)/g;
    // 替换每个匹配到的占位符
    return value.replace(placeholderRegex, (match) => {
      const value = getEventValue(match, eventObj);
      // 如果取到的是对象，转成JSON字符串（可根据需求调整）
      return typeof value === 'object' ? JSON.stringify(value) : value;
    });
  }
  // 非对象非字符串，直接返回原值
  return value;
}

// 处理整个模板数组
const processedTemplates = templates.map(template => processTemplateValue(template, event));

// 输出替换后的结果
console.log(processedTemplates);

代码细节说明 #

1. getEventValue函数：专门负责解析占位符路径，从事件对象中逐层取值。如果路径不存在（比如.event.nonExistent），会保留原占位符避免报错。
2. processTemplateValue函数：递归处理所有数据类型：
   • 数组：遍历每个元素并递归处理
   • 对象：遍历每个键值对并递归处理
   • 字符串：用正则匹配所有.event开头的占位符，调用getEventValue完成替换，同时把对象类型的结果转成JSON字符串（可根据需求修改）
3. 最终处理：遍历模板数组，对每个模板对象应用处理函数，得到最终的替换结果。

替换后的结果示例 #

运行代码后，processedTemplates会输出：

[
  {
    a: "1",
    a2: { some: "other Obj" },
    a3: ["or", "array"],
    b: "evt_12345",
    b2: "'user_upload' and more strings"
  },
  {
    dontKnowKeys: "of where the {\"id\":\"evt_12345\",\"name\":\"user_upload\",\"properties\":{\"file\":\"report.pdf\",\"size\":2048}} will be in",
    mightNotBeHere: "no placeholder here",
    butHereAgain: "{\"id\":\"evt_12345\",\"name\":\"user_upload\",\"properties\":{\"file\":\"report.pdf\",\"size\":2048}}",
    andSomeDeep: "report.pdf is Full..."
  }
]

你可以根据实际需求调整getEventValue里的逻辑，比如修改对象的输出格式，或者设置路径不存在时的默认值。

内容的提问来源于stack exchange，提问作者Joel