一个简单的js字符模板替换工具函数

分离html 代码和js 代码

// 	id ：你要替换的对应HTML 模板块，data： 对应的数据对象
function templateReplace(id, data) {
      var tp1 = document.getElementById(id).innerHTML;
       var exp = /\{\{(\w+)\}\}/;

       while (result = exp.exec(tp1)) {
           if (result[0]) {
               tp1 = tp1.replace(result[0], data[result[1]]);
           }
       }
       return tp1;
   }

使用方法如下：

// html 部分
<script type="text/html" id="demo">
	<div>
		<h1>{{title}}</h1>
		<p>{{des}}</p>
	</div>
</script>

// js 引用代码
var demoData = {
	'title': '测试代码标题',
	'des': '这是测试代码的描述'
}	
var demoStr = templateReplace('demo', demoData);
document.body.appendChild(demoStr);

注意：html 模板中的变量名必须用 {{ xxx }} 双括号给括起来，且与传入的数据对象的key 值保持一致，不然就无法替换成功

使用此类方法可以剔除掉js 代码中的html 代码，让HTML结构和业务代码分离，也更容易调试