正则表达式实现简单模板数据填充

Posted 2021-09-28 web半晨

let templateStr = '<h1>我买了一棵{{thing}}，花了{{money}}元，好{{mood}}</h1>';
let data = {
	thing: '白菜',
	money: 5,
	mood: '激动'
};

// 最简单的模板引擎的实现机理，
// 利用的是正则表达式中的 replace() 方法。
// replace() 的第二个参数可以是一个函数，
// 这个函数提供捕获的东西的参数，就是$1
// 结合 data 对象，即可进行智能的替换
function render(templateStr, data) {
	return templateStr.replace(/\\{\\{(\\w+)\\}\\}/g, function (findStr, $1) {
		return data[$1];
	});
}

console.log(render(templateStr, data));
// <h1>我买了一棵白菜，花了5元，好激动</h1>