Javascript 自定义模板引擎

Question

我正在尝试在 javascript 中创建一个自定义模板引擎，但由于无法使用正则表达式提取令牌，因此我无法开始使用。 以下是要求：

1. 变量定义如下： $(variable)
2. 函数： $(name arg1 "this is arg2 but it contains whitespaces.")
3. Function arguments 可以包含其他变量$(name $(variable) arg2)

变量和函数都将异步呈现。 例如：从 db 中获取$(variable)的值，然后替换它。

这不是为了呈现 html 页面，而是简单地替换用户在后端输入的字符串。

编辑

更多信息：
假设用户输入以下字符串： $(id $(lowercase John))
在后端应用程序必须做到：

1. 将“约翰”转换为小写。
2. 从 db 获取“john”的 id。

这只是一个简单的例子来演示它应该如何工作。

有没有可以帮助我实现这一目标的库？ 如果没有，知道如何实现吗？

编辑 2：我尝试使用Mustache并将分隔符更改为 $()，但是 function（部分）标签不满足要求。 在 Mustache 中，对于函数我必须这样做： $(#name) $(variable) "this is arg2 but it contains whitespaces."$(/name)也不支持异步渲染。

Answer 1

在这里。 此正则表达式将识别可以替换的模板。 请注意，它只选择嵌套模板中最里面的模板。

/\$\((?<FirstTerm>\S+?)(?<OtherTerms>(?:\s+(?:\w+|".*?"))+)?\)/g

因此，只需使用正则表达式用您的模板逻辑递归替换 function ，直到没有更多匹配项。 内部模板将被替换，您将留下替换模板的字符串。

Answer 2

如果没有，知道如何实现吗？

您应该使用抽象语法树，并编写兼容的解析器。 虽然正则表达式（如 Pedro Lima 所说）适用于简单的模板，但如果您想扩展解析器，您将需要一些更健壮的东西。

作为抽象语法树解析器的示例， $(test1 $(test2) test3) lorem ipsum $(test4)将变成以下内容：

（感谢 Mile Shang 的Syntree的树生成器。）

至于具体怎么写解析器，我想你可以自己弄清楚。 只需遍历字符串并检查模板分隔符。 阅读像 Handlebars 这样的模板库的源代码可能会有所帮助。

Answer 3

这篇文章的其他答案是正确的，但是，我想确切地分享我是如何实现这一点的：

1. 创建递归匹配 function。 我使用Steven Leviathan 的文章来实现这一点。

2. 创建一个渲染 function 并在 function 内部调用递归匹配 function 以查找变量/函数名称并将其替换为适当的值。

3. 继续递归调用渲染 function 直到 function 内的所有 arguments 都被替换。