JavaScript实现模板赋值-模板变量替换的方法

模板替换功能在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>

本文完~