如何提取HTML字符串中Handlebars模板内的所有变量名？

你遇到的场景是：给定包含Handlebars表达式的模板，想要提取出模板实际用到的变量（比如示例中的count和age，排除未使用的name），正则表达式因为无法精准处理表达式内的JS逻辑，很难实现需求。下面提供两种可靠的解决方法：

方法一：利用Handlebars自身的编译元信息 #

Handlebars编译模板时，开启特定选项后可以获取到模板的抽象语法树（AST），通过遍历AST就能精准提取变量：

const html = 
`<div>
    <button>Increase Count</button>     
    <div>{{ 'Double count:' + count * 2 }}</div>     
    <div>{{ age }}</div>   
</div>`;

// 编译模板时启用data选项，让编译后的函数携带AST信息
const template = Handlebars.compile(html, { data: true });
// 获取模板的主AST节点
const ast = template._main;

const usedVariables = new Set();

// 递归遍历AST节点，筛选出实际使用的根级变量
function traverseAST(node) {
    if (node.type === 'MustacheStatement') {
        traverseAST(node.path);
    } else if (node.type === 'PathExpression') {
        // 只收集非数据绑定、且为单级的变量（排除如user.name这类嵌套变量）
        if (!node.data && node.parts.length === 1) {
            usedVariables.add(node.parts[0]);
        }
    } else if (node.type === 'BinaryExpression') {
        // 处理二元表达式（比如count * 2这类运算）
        traverseAST(node.left);
        traverseAST(node.right);
    } else if (node.body) {
        // 遍历包含子节点的结构（如Program、块语句）
        node.body.forEach(traverseAST);
    }
}

traverseAST(ast);
console.log(Array.from(usedVariables)); // 输出: ['count', 'age']

方法二：使用专门的Handlebars解析库 #

如果不想自己写AST遍历逻辑，可以用现成的解析库（比如handlebars-parser）来处理：

// 先安装依赖：npm install handlebars-parser
const { parse } = require('handlebars-parser');

const html = 
`<div>
    <button>Increase Count</button>     
    <div>{{ 'Double count:' + count * 2 }}</div>     
    <div>{{ age }}</div>   
</div>`;

const ast = parse(html);
const usedVariables = new Set();

function extractVars(node) {
    if (node.type === 'MustacheStatement') {
        extractVars(node.expression);
    } else if (node.type === 'PathExpression') {
        if (!node.data && node.parts.length === 1) {
            usedVariables.add(node.parts[0]);
        }
    } else if (node.type === 'BinaryExpression') {
        extractVars(node.left);
        extractVars(node.right);
    } else if (node.body) {
        node.body.forEach(extractVars);
    }
}

extractVars(ast);
console.log(Array.from(usedVariables)); // 输出: ['count', 'age']

为什么正则表达式不可靠？ #

正则只能简单匹配{{}}包裹的内容，但模板中的表达式可能包含字符串拼接、算术运算等复杂JS逻辑（比如示例中的'Double count:' + count * 2），正则无法准确区分其中的变量、字符串常量和运算符，很容易出现误提取或漏提取的情况。

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