JavaScript正则实现文本模板引擎解析

正则表达式在文本模板引擎中的基础作用

正则表达式是文本模板引擎中基础且关键的技术，其核心任务是识别出{{key}}这类占位符，并从数据对象中取出对应值进行替换。虽然听起来简单，但实际实现需要同时做好“正确提取变量名、安全替换、避免误匹配”这三项工作。

基础场景：扁平数据结构

以最简单的场景为例，模板为"Hello {{name}}, you ha ve {{count}} messages"，数据为{name: "Alice", count: 5}。此时可编写最简单的正则表达式 /{{(\w+)}}/g，利用括号捕获变量名，再通过 replace 的回调函数到数据对象中查表替换：

• template.replace(/{{(\w+)}}/g, (match, key) => data[key] '')
• 必须添加 g 标志，否则仅替换第一个匹配项
• 使用 '' 作为 fallback，可避免 undefined 被转换为字符串 "undefined"，这在实际渲染中常引发问题

进阶场景：支持嵌套路径

实际项目中数据往往并非扁平结构，例如需要访问 user.profile.name。原始的正则表达式仅支持 \w+，无法匹配点号，因此需要将字符集扩展为 [\w.]+。注意——不能纳入空格或括号，否则容易匹配到非法字符。替换逻辑也需同步升级：将 "user.profile.name" 按点拆分为路径数组，再逐级取值：

• 正则表达式改为 /{{([\w.]+)}}/g
• 回调中使用 key.split('.').reduce((obj, k) => obj.[k], data) 安全取值
• 同样建议 fallback 为空字符串，避免因路径不存在导致渲染中断

注意安全：防误匹配和XSS

直接输出用户数据可能带来 XSS 风险，尤其当模板来源不可信时。同时需防止 {{name}}} 或 {{{name}} 这类不配对结构干扰匹配。正确做法是让正则表达式更鲁棒：允许占位符内部存在空格，例如改为 /{{\s*([\w.]+)\s*}}/g。此外，默认应对输出进行 HTML 转义——将 &、<、> 替换为对应实体。若确实需要原样输出 HTML（例如生成富文本片段），可约定特殊语法，如 {{{html}}}，并用单独的正则表达式匹配并绕过转义。

再扩展一步：支持无参数过滤器

实际业务中常需要对模板变量进行格式化，如日期转大写、数字加千分位。可在占位符中添加管道符，约定语法为 {{date | uppercase}}。正则表达式升级为 /{{\s*([\w.]+)\s*(:\|\s*(\w+))\s*}}/g。其中第二组 (\w+) 为可选，专门匹配过滤器名称。回调中根据过滤器名调用预设函数，例如 filters.uppercase(val)。过滤器函数应保持纯函数特性：接收原始值，返回处理结果，不产生副作用。

以上步骤从最简的正则表达式匹配逐步叠加，支持了点路径、空格、HTML 转义和过滤器。整个过程未引入复杂编译步骤，完全依赖正则表达式和少量逻辑，即可构建出轻量、可用的文本模板引擎。若项目中仅需处理简单替换场景，此方案比引入 Handlebars 或 Mustache 要轻巧得多。