JavaScript基于字符串模板提取动态关键字的实现方法问询

JavaScript 目前没有内置的专门用于反向匹配模板字符串提取参数的标准API，你可以通过正则转换的方式自行实现，逻辑如下：

• 先提取模板中的所有占位符名称，同时将模板转换为可匹配的正则表达式，把{{xxx}}占位符替换为对应的正则捕获组
• 用生成的正则匹配输入字符串，将捕获到的内容和占位符名称一一对应，返回结果对象

代码示例 #

function parseTemplate(template, input) {
  // 收集所有占位符名称
  const placeholders = []
  // 先转义模板中的正则特殊字符
  const escapedTemplate = template.replace(/[.*+?^${}()|[\]\\]/g, char => `\\${char}`)
  // 替换所有{{占位符}}为正则捕获组，同时记录占位符名
  const regexStr = escapedTemplate.replace(/\\{\\{(\w+)\\}\\}/g, (_, placeholderName) => {
    placeholders.push(placeholderName)
    // 若需支持参数值带空格，可将下方的[^\\s]+改为.+?
    return '([^\\s]+)'
  })
  const matchRes = input.match(new RegExp(`^${regexStr}$`))
  if (!matchRes) return null
  // 拼接为键值对结果
  return placeholders.reduce((result, name, idx) => {
    result[name] = matchRes[idx + 1]
    return result
  }, {})
}

// 测试
const myTemplate = 'I am {{name}} from {{city}}'
const inputStr = 'I am Alex from Paris'
console.log(parseTemplate(myTemplate, inputStr)) // { name: "Alex", city: "Paris" }

注意事项 #

如果你的参数值可能包含空格，只需把捕获规则里的[^\\s]+替换为.+?即可，需要确保模板的固定文本边界足够清晰，避免出现匹配混乱的情况。

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