摘要：翻譯行代碼創(chuàng)造模板引擎一想看博客原文鏈接，請點擊下方一個非常好用的學(xué)習(xí)正則表達的網(wǎng)站正則表達式圖文解說網(wǎng)站譯文事情的起因，我想編寫一個邏輯簡單的模板引擎，它可以很好滿足我現(xiàn)在的需求。，表示全局匹配。

JavaScript template engine in just 20 lines

一個非常好用的學(xué)習(xí)正則表達的網(wǎng)站
正則表達式圖文解說網(wǎng)站

事情的起因，我想編寫一個邏輯簡單的模板引擎，它可以很好滿足我現(xiàn)在的需求。

我知道不能找一些現(xiàn)有的引擎，因為它們絕大多數(shù)是基于NodeJS的，很難在瀏覽器中去實現(xiàn)它們。

而我希望用原生JavaScript去寫，這樣也可以在瀏覽器上運行。

我是從John Resig的博客[](https://johnresig.com/blog/ja...。

我稍微改動了一下，縮減到20行。 這個腳本的工作原理，非常有趣。

在本文中， 將一步一步來創(chuàng)建這個引擎，這樣你就體會到來自John的奇思妙想。

functiom TemplateEngine(tpl, data) {
    //魔法細節(jié)在這里 magic details here!
}

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

var data = {
    name: "Shaw",
    age: 18
}

console.log(TemplateEngine(tpl, data)); 
//按照構(gòu)思，我們想實現(xiàn)的需要和想得到結(jié)果 應(yīng)該是 "
Hello, my name is Shaw. I"m 18 years old.
"

一個簡單的函數(shù)，接收兩個參數(shù)：tpl（模板字符竄），data（JS對象格式）；

動態(tài)模塊是指在 tpl（模板字符竄）中，你想要匹配并用數(shù)據(jù)替換的部分。

"<%string%>"

//舉個例子
//tpl中的動態(tài)模塊有兩個：<%name%>和<%age%>。

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

在這里，我決定用正則表達式去實現(xiàn)，正則表達式不是我的強項，所以有什么建議，盡管暢所欲言。

Tips: 其實正則沒那么難，平時多練練就好了。 首先克服內(nèi)心的恐懼，嘗試著寫，想不出來，多翻翻基礎(chǔ)知識。

var regEx = /<%([^%>]+)?%>/g

這個正則表達式是什么意思呢？

如果實在看不懂正則，可以看下這篇博客。 正則表達式-基礎(chǔ)知識Review

在一個字符竄中，匹配以"<%"開頭 和 "%>" 結(jié)尾的字符竄片段。

g，表示全局匹配。

在這里，我們需要用到正則表達式的exec()方法。

該方法用于正則表達式模式在字符竄中運行查找，如果exec()找到匹配的文本，則返回一個數(shù)組，否則返回null。

regExp.exec(str);

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";
var regEx =  /<%([^%>]+)?%>/g;

console.log(regEx.exec(tpl));
/*
[0: "<%name%>", 1: "name", index: 21, input: "
Hello, my name is <%name%>. I"m <%age%> years old.
", length: 2, groups: undefined]
*/

得到了正則表達式在字符竄中匹配的字符竄片段。

只得到一個匹配的字符竄片段！

可是我們需要所有匹配的字符竄片段。

這時，我們需要一個while循環(huán)語句來依次得到匹配字符竄。

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

var regEx = /<%([^%>]+)?%>/g;

var match;

while(match = regEx.exec(tpl)) {

    console.log(match);

    //["<%name%>", "name", index: 21, input: "
Hello, my name is <%name%>. I"m <%age%> years old.
", groups: undefined]

    //["<%age%>", "age", index: 35, input: "
Hello, my name is <%name%>. I"m <%age%> years old.
", groups: undefined]
}

這里要了解RegExp.exec()方法，在全局匹配中的特性：

調(diào)用全局的RegExp對象的exec()時，它會在RegExp實例的lastIndex屬性指定的字符處開始檢索字符竄string

當(dāng)exec()找到了與表達式相匹配的文本時， 在匹配后， 它將把RegExp實例的lastIndex屬性設(shè)置為匹配文本的最后一個字符的下一個位置。可以通過反復(fù)調(diào)用exec()方法來遍歷字符竄中的所有匹配文本。

==當(dāng)exec()再也找不到匹配的文本時，它將返回null，并把lastIndex屬重置為0。==

var reg = /d/g;

var r =  reg.exec("a1b2c3");

console.log(r);

console.log(reg.lastIndex); // 2

r = reg.exec("a1b2c3");

console.log(reg.lastIndex); // 4

var reg = /d/g;

while (r = reg.exec("a1b2c3")) {
    console.log(r.index + ":" + r[0])
}

//1:1 , 3:2, 5:3

現(xiàn)在，變得有趣了！！

給函數(shù)傳遞一個真實的數(shù)據(jù)（JS對象格式）。

然后用數(shù)據(jù)替換匹配的字符竄片段。

能想到的最簡單的方法，就是使用String.prototype.replace()方法了。

我們可以這樣寫

function TemplateEngine(tpl, data){
    var regEx = /<%([^%>]+)?%>/g, matchStrArr;

    while(matchStrArr = regEx.exec(tpl)) {
        tpl = tpl.replace(matchStrArr[0], data[matchStrArr[1]])
    }

    return tpl;
}

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

var personalInfo = {
    name: "Shaw",
    age: 18
}

var htmlStr = TemplateEngine(tpl, personalInfo);

console.log(htmlStr); // 
Hello, my name is Shaw. I"m 18 years old.

//運行成功，可以使用。

測試，運行成功！

但是這還不夠好，數(shù)據(jù)是非常簡單的JS對象，使用object["property"]對象的中括號語法，很容易去讀取對象的值。

但在實踐中，我們用到的數(shù)據(jù)中，可能有復(fù)雜的嵌套對象。

//嵌套對象
data = {
    name: "Krasimir Tsonev",
    profile: {age:29}
}