我们前端在写小程序和vue等页面时，经常用到模板组件，不同地方调用同样的布局，数据不一样传入就行，可是你不知道的是，html通过script也可以制作模板组件，在需要的时候调用。很多人不知道而已，这个秘密被我发现了，啊哈哈哈。

为了快速测试，我用了jquery控制模板，后面谁用到了可以改成原生的就行： 

<script id="tm" type="text/html">
	<h1>{title}</h1>
	<p>{infoMsg}</p>
</script>

正则过滤 传数据 

<script type="text/javascript">
	var data = {
		'title': '123456',
		'infoMsg':'内容详情'
	}
			
	var reg = new RegExp("\\{([^\\[\\]]*?)\\}", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
	var html = $("#tm").html()
	var source = html.replace(reg, function (node, key) { return data[key]; });
	$(".box").append(source)
</script>

全部代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../css/qux/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
 		<div class="box">
 			
 		</div>

		<script id="tm" type="text/html">
			<h1>{title}</h1>
			<p>{infoMsg}</p>
		</script>
		<script type="text/javascript">
			var data = {
				'title': '123456',
				'infoMsg':'内容详情'
			}
			
			var reg = new RegExp("\\{([^\\[\\]]*?)\\}", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
			var html = $("#tm").html()
			var source = html.replace(reg, function (node, key) { return data[key]; });
			$(".box").append(source)
		</script>
	</body>
</html>