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

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/2/14 1:21:14 共计：3671 浏览

模板替换功能在html,php,jsp等服务器端脚本中很常见，功能也很强大。如果想在浏览器中运行的js代码中也实现模板替换功能该如何实现呢？

在js里面，如何需要使用js往页面中插入html内容。给script标签设置type="text/template"属性，标签里的内容不会被执行，也不会显示在页面上，但是可以在另外一个script里面通过获取插入到页面上。

这样可以把大段的html和js进行分离，以下是只通过JavaScript来实现的方式。

body内的元素：

script标签的模板：

<li>

<p>描述:#{description}</p>

</li>

</script>

注：为了区别{{name}}，我们这里使用#{name}的形式。如果有项目需求，可以直接改下面的正则即可。

JavaScript代码：

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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。