javascript - 正则表达式不能正常工作

Question

我正在开发模板引擎，我 try catch <% %> 内的所有字符串，但是当我在 <%object.property%> 模式上工作时，一切都会失败。我的代码:

var render = function(input, data){
    var re = /<%([^%>]+)?%>/g;
    var templateVarArray;
    // var step = "";
    while((templateVarArray = re.exec(input))!=null){
        var strArray = templateVarArray[1].split(".");
        // step+= templateVarArray[1]+" ";
        if(strArray.length==1)
            input = input.replace(templateVarArray[0], data[templateVarArray[1]]);
        if(strArray.length==2){
            input = input.replace(templateVarArray[0], data[strArray[0]][strArray[1]]);
        }
    }
    // return step;
    return input;
}
var input = "<%test.child%><%more%><%name%><%age%>";

document.write(render(input,{
    test: { child: "abc"},
    more: "MORE",
    name:"ivan",
    age: 22


}));

我的结果:

abc<%more%><%name%>22

我想要的是:abc MORE ivan 22

另外，网上引用了RegExp/<%([^%>]+)?%>/g，我查了一下它的含义，但还是不太确定其含义。特别是为什么需要“+”和“？”，非常感谢!

Answer 1

如果您添加 console.log() 语句，它将显示下一次搜索将在哪里进行:

while((templateVarArray = re.exec(input))!=null){
    console.log(re.lastIndex);    // <-- insert this
    var strArray = templateVarArray[1].split(".");
    // step+= templateVarArray[1]+" ";
    if(strArray.length==1)
        input = input.replace(templateVarArray[0], data[templateVarArray[1]]);
    if(strArray.length==2){
        input = input.replace(templateVarArray[0], data[strArray[0]][strArray[1]]);
    }
}

您会看到类似以下内容:

14
26

这意味着下次运行 re.exec(...) 时，它将分别从索引 14 和 26 开始。因此，在替换数据后，您会错过一些匹配项。

正如 @Alexander 指出的那样，将正则表达式末尾的“g”去掉。现在您将看到类似这样的内容:

0
0

这意味着每次搜索都会从字符串的开头开始，您现在应该得到您要查找的内容:

abcMOREivan22

关于您对正则表达式及其作用的问题，让我们将其分解:

<% - this matches the literal '<' followed immediately by '%'

([^%>]+) - the brackets (...) indicate we want to capture the portion of the string that matches the expression within the brackets
  [^...] - indicates to match anything except what follows the '^'; without the '^' would match whatever pattern is within the []
  [^%>] - indicates to match and exclude a single character - either a '%' or '>'
  [^%>]+ - '+' indicates to match one or more; in other words match one or more series of characters that is not a '%' and not a '>'

? - this indicates we want to do reluctant matching (without it we do what is called 'greedy' matching)

%> - this matches the literal '%' followed immediately by '>'

最难理解的部分是“？”。在这种情况下使用，意味着我们停止匹配仍与整个正则表达式匹配的最短模式。在这种情况下，是否包含它没有任何区别，尽管有时根据匹配模式它会很重要。

改进建议

当前逻辑仅限于嵌套两层深度的数据。要使其能够处理任意嵌套，您可以这样做:

首先，添加一个小函数来进行替换:

var substitute = function (str, data) {
  return str.split('.').reduce(function (res, item) {
    return res[item];
  }, data);
};

然后，将 while 循环更改为如下所示:

  while ((templateVarArray = re.exec(input)) != null) {
    input = input.replace(templateVarArray[0], substitute(templateVarArray[1], data));
  }

它不仅可以处理任意数量的级别，您还可能会发现“substitute()”函数的其他用途。