用Mustache模板来进行字符串处理（截取替换）

这两天在做一个有用到字符串截取替换的需求，这个字符串有的地方是一个固定格式的表达式，比如：

随便%name.001%输入%001.select.下拉框%点%name.010%%010.table.表格%什么%name.100%文字%100.form.表单%看看

比如我一条数据，有id，name，type，description等这些属性。
这里的%和%之间就相当于一个占位符，第一个%到第二个%之间用的是name.id这种格式，后面要将这个替换成数据的名称name；
第三个%到第四个%用的是id.type.description是这种格式，后面要替换成数据的具体信息。
一条数据有四个%，多条数据则每四个%循环一次。

大概就是上面这种形式吧，我一开始就是用%来处理这些字符串的，获取每一个%的位置，用indexOf和substring方法来进行处理。

因为数据结构太复杂，循环又多，又有多种不同的情况要区分，代码就变的很冗长，循环嵌套太多，当时做的时候，脑袋都绕晕了。每次做着做着哪里出错了，分析是哪里的问题就得重新梳理一遍代码，那一大段一大段的代码看得我头都晕了。这个任务的其他部分都很快都做好了，就差这个字符串的结果了，当时真的是焦头烂额。后面别人告诉我试试用Mustache模板来做。

Mustache模板用过，但是没有想过这个可以用来处理字符串。

大概就是把字符串当成一个模板，然后获取到那些占位符要替换的数据，直接替换就可，也不用获取占位符的位置，不用截取占位符。
比如我把上面的那一段字符串的%换成大括号{{}}

var string = "随便输入{{name.001}}点什么数据{{001.select.下拉框}}来进行{{name.010}}一个Mustache模板{{010.table.表格}}的测试{{name.100}}{{100.form.表单}}看看结果";
//这里是测试用的数组
var arr = [
			{id:"001",name:"选择下拉框",type:"select",description:"下拉框"},
			{id:"010",name:"填写表格",type:"table",description:"表格"},
			{id:"100",name:"提交表单",type:"form",description:"表单"}
		];
for(var i = 0; i < arr.length; i++){
	var name = "name."+arr[i].id;
	var info = arr[i].id+"."+arr[i].type+"."+arr[i].description;
	var layerInfo = {"name" : name , "info" : info};
	string = string.replace("{{"+Mustache.render("{{name}}", layerInfo)+"}}", arr[i].name);
	string = string.replace("{{"+Mustache.render("{{info}}", layerInfo)+"}}", arr[i].description);
}
console.log(string);
//输出结果：
//随便输入选择下拉框点什么数据下拉框来进行填写表格一个Mustache模板表格的测试提交表单表单看看结果

用Mustache的话就可以省略获取每个%的位置的代码，还可以省略用到indexOf和substring的代码。

改完之后，代码的可读性简洁性完全就不是一个级别的，也不用区分什么什么情况了，Mustache模板已经帮你处理好了。