Javascript 自定义模板引擎

Question

I'm trying to create a custom template engine in javascript but I'm having trouble getting started as I cannot extract tokens using regex. Here are the requirements:

1. Variables are defined like this: $(variable)
2. Functions: $(name arg1 "this is arg2 but it contains whitespaces.")
3. Function arguments can contain other variables $(name $(variable) arg2)

Both variables and functions will be rendered async. For example: Get the value for $(variable) from db then replace it.

This is not for rendering an html page but to simply replace a string entered by a user on the backend.

Edit

More information:
Suppose a user enters the following string: $(id $(lowercase John))
On the backend application must do:

1. Convert "John" to lowercase.
2. Get the id for "john" from db.

This is only a simple example to demonstrate how this should work.

Are there any libraries that can help me achieve this? If not, any idea how to implement this?

EDIT 2: I tried using Mustache and I changed the delimiters to $(), however the function (section) tags do no satisfy the requirements. In Mustache, for functions I must do this: $(#name) $(variable) "this is arg2 but it contains whitespaces."$(/name) also it does not support async rendering.

Answer 1

Here . This regex will identify the templates that can be replaced. Note that it only selects the innermost templates in nested templates.

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

So just use a regex replace function with your templating logic recursively until there are no more matches. The inner templates will be replaced and you'll be left with the string with templates replaced.

Answer 2

If not, any idea how to implement this?

You should use an Abstract Syntax Tree, and write a compatible parser. While regex (as Pedro Lima stated) is good for simple templating, if you ever want to extend the parser, you'll need something a bit more robust.

As an example of an Abstract Syntax Tree parser, $(test1 $(test2) test3) lorem ipsum $(test4) would be turned into the following:

(Thanks to Mile Shang's Syntree for the tree generator.)

As for specifically how to write a parser, I think you can figure it out. Just iterate over the string and check for the template delimiter. Reading the source code for a templating library like Handlebars might help.

Answer 3

Other answers on this post are correct, however, I want to share exactly how I managed to implement this:

1. Create a recursive match function. I usedSteven Leviathan's article to implement this.

2. Create a render function and inside the function call the recursive match function to find and replace variable/function names with appropriate values.

3. Keep calling the render function recursively until all arguments inside a function have been replaced.