Angular预渲染页面替换{{field(n)}}为submission.inputs对应值的方法咨询

我来帮你搞定这个占位符替换的问题！针对你需要在无JS预渲染的内容里，把{{field(10)}}或{{field[10]}}这类占位符替换成submission.inputs对应索引值的需求，这里有个直接可行的实现方案：

核心替换函数 #

我们可以用JavaScript的String.replace()配合正则表达式，全局匹配所有符合格式的占位符，并替换为对应的值：

function replacePlaceholders(content, submission) {
  // 正则匹配两种格式：{{field(数字)}} 和 {{field[数字]}}
  const placeholderRegex = /{{field\((\d+)\)}}|{{field\[(\d+)\]}}/g;
  
  return content.replace(placeholderRegex, (match, group1, group2) => {
    // 提取占位符中的索引（group1对应()格式，group2对应[]格式）
    const inputIndex = group1 || group2;
    // 返回对应的值，若索引不存在则返回空字符串避免显示占位符
    return submission.inputs[inputIndex] || '';
  });
}

示例使用 #

按照你给出的场景，调整变量声明（注意原示例中var submission.inputs[10]的写法是无效的，需要先定义对象结构）：

// 你的预渲染内容字符串
const originalContent = 'This is some content: {{field[10]}}';
// 你的数据对象
const submission = {
  inputs: {
    10: 'replace value'
  }
};

// 执行替换
const newContent = replacePlaceholders(originalContent, submission);
console.log(newContent); // 输出："This is some content: replace value"

额外说明 #

• 覆盖两种占位符格式：正则同时匹配{{field(数字)}}和{{field[数字]}}，不管你用哪种写法都能处理；
• 容错处理：如果submission.inputs中没有对应索引的值，会返回空字符串，避免在打印/PDF中残留未替换的占位符；
• 预渲染场景适配：这个函数可以在服务器端渲染（比如Angular Universal）时执行，或者在构建静态预渲染文件时批量处理，确保最终输出的内容是完全替换后的静态文本，无需前端JS支持。

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