发布：2023/2/5 19:23:50作者：管理员 来源：本站 浏览次数：285
模板替换功能在html,php,jsp等服务器端脚本中很常见，功能也很强大。如果想在浏览器中运行的js代码中也实现模板替换功能该如何实现呢？
在js里面，如何需要使用js往页面中插入html内容。给script标签设置type="text/template"属性，标签里的内容不会被执行，也不会显示在页面上，但是可以在另外一个script里面通过获取插入到页面上。
这样可以把大段的html和js进行分离，以下是只通过JavaScript来实现的方式。
body内的元素：
<div id="results"></div>
script标签的模板：
<script id="category" type="text/template">
<li>
<h3>名称:#{name}</h3>
<p>描述:#{description}</p>
</li>
</script>
注：为了区别{{name}}，我们这里使用#{name}的形式。如果有项目需求，可以直接改下面的正则即可。
JavaScript代码：
<script>
const render = (id, data) => {
const template = document.getElementById(id).innerHTML
const div = document.createElement('div')
const get = (o, p) => p.split('.').reduce((o, k) => o && o[k], o)
div.innerHTML = template.replace(/#{([\s\S]*?)}/g, (_, name) => get(data, name.trim()))
return div;
}
const results = document.querySelector('#results')
let data =[{name:'fly63前端网',description:'网站地址：https://www.fly63.com'}]
data.forEach(item=>{
results.appendChild(render('category', item))
})
</script>
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4