在HTML中使用<script>做模板

最新推荐文章于 2024-04-02 22:33:02 发布

nathanhuang1220

最新推荐文章于 2024-04-02 22:33:02 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：小技巧文章标签： javascript script 正则表达式模板

本文链接：https://blog.youkuaiyun.com/nathanhuang1220/article/details/19676207

小技巧专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在HTML中使用模板结构并利用JavaScript动态替换模板中的动态内容，简化内容填充过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时我们会遇到在HTML中使用模板进行填充内容而又懒的使用文件操作（如XML）。
可以用本文中的方法：

html中加入标签，注意此时类型为text/html并在标签中加入任意HTML结构，需要动态定制的内容可用[]括起
---------

<script type="text/html" id="item-template">
<div>[Title]</div>
<div>[Content]</div>
</script>

然后在JS中先定义用于对带[]的内容做替换的正则表达式

var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');//i gm是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
var html =$('#item-template').html();//jquery获取id为item-template的element，取出里面的内容
//再用如下方法进行内容替换，需区分大小写
var source = html.replace(reg, function(node, key){
 
   return{'Title':'标题','Content':'往下翻'}[key];
});
alert(source);//<div>标题</div><div>内容</div>