JavaScript中使用正则实现文本模板引擎的简单解析

正则实现轻量文本模板引擎需匹配{{key}}并安全替换：基础用/{{(w+)}}/g捕获变量名，点号路径改用/{{([w.]+)}}/g配合reduce取值，加强版支持空格和过滤器/{{s([w.]+)s(?:|s(w+))?s}}/g，统一HTML转义防XSS。

用正则实现一个轻量文本模板引擎，核心是匹配 {{key}} 这类占位符并替换成对应数据，关键在于正确提取变量名、安全替换、避免误匹配。

基础匹配与替换

最简场景：模板为 "Hello {{name}}, you have {{count}} messages"，数据为 {name: "Alice", count: 5}。可用 /{{(w+)}}/g 全局匹配，括号捕获变量名，再用 replace 回调函数查表替换：

• template.replace(/{{(w+)}}/g, (match, key) => data[key] ?? '')
• 注意加 g 标志，否则只替换第一个
• ?? '' 防止 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}} 这类不配对结构干扰匹配：

立即学习“Java免费学习笔记（深入）”；

• 正则加强为 /{{s*([w.]+)s*}}/g，允许内部空格，更鲁棒
• 默认做 HTML 转义：将 &、、<code>> 替换为对应实体
• 如需原样输出（如生成 HTML 片段），可约定语法如 {{{html}}}，单独匹配处理

简单扩展：支持无参数过滤器（如 {{date | uppercase}}）

在占位符中加入管道符，可解析为 key 和 filter 两部分。正则升级为：/{{s*([w.]+)s*(?:|s*(w+))?s*}}/g

• 第二组 (w+) 可选，匹配过滤器名
• 回调中根据 filter 名调用预设函数，例如 filters.uppercase(val)
• 过滤器函数应接收原始值并返回处理后结果，保持纯函数特性