js中使用HTML模板字符串

百科大全

更新时间：2025-10-05 07:17:5148

admin管理员组
文章数量:1794759

js中使用HTML模板字符串

一、简介

在实际项目中，难免会遇到在HTML style="color:#2aa0ea" target=_blank class=infotextkey>js中动态拼接html的代码，这样虽然比较简单，但是相对来说不太好维护，后期如果改了html结构，那么js改动的东西会比较多。如下代码就是动态拼接html的不太好的代码：

var html = '<a class="weui-cell weui-cell_access" href="">'+ '<div class="weui-cell__hd">'+ '<div class="round"></div>'+ '</div>'+ ' <div class="weui-cell__bd">'+ '<p class="font30 text-title">'+ (item.clsname ? item.clsname : "") +'   ' + item.zrs + '人</p>'+ '<div class="text-desc font24 mgt10">'+ '<span>男生 '+item.nszrs+'人</span>'+ '<span class="divider-vertical"></span>'+ '<span>女生'+item.nvzrs+'人</span>'+ '</div></div><div class="weui-cell__ft"></div></a>';

以下用类似ES6中模板字符串的方式来说明如何在js中使用HTML模板。

二、方法

【a】首先，扩展一个解析HTML代码的方法：

/** * 扩展HTML模板解析的方法 * @param functionObject 解析的对象 * @returns {function(*): string} */ Object.prototype.parseHTMLTemplate = function (functionObject) { return function (scope) { return functionObject.toString().match(/\\/\\*([\\s\\S]*?)\\*\\//)[1].replace(/\\$\\{\\w.+\\}/g, function (variable) { var value = scope; variable = variable.replace('${', '').replace('}', ''); variable.split('.').forEach(function (section) { value = value[section]; }); return value; }); } };

该方法主要是通过正则替换${xxx}的值来实现解析HTML代码。

【b】将HTML模板通过注释方式写在js方法里面：

示例代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js中使用HTML模板</title> <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> </head> <body> <div id="example01">示例一:使用${title}指定替换的值</div> <div id="example02">示例二:使用${data.title}指定替换的值</div> <script type="text/javascript"> /** * 扩展HTML模板解析的方法 * @param functionObject 解析的对象 * @returns {function(*): string} */ Object.prototype.parseHTMLTemplate = function (functionObject) { return function (scope) { return functionObject.toString().match(/\\/\\*([\\s\\S]*?)\\*\\//)[1].replace(/\\$\\{\\w.+\\}/g, function (variable) { var value = scope; variable = variable.replace('${', '').replace('}', ''); variable.split('.').forEach(function (section) { value = value[section]; }); return value; }); } }; /************************示例一:使用${title}指定替换的值***********************/ var template01 = parseHTMLTemplate(function () { /* <div> <h2>${title}</h2> <div class="content">${content}</div> </div> */ }); var object01 = { title: 'title01', content: 'content01' }; var newHTML = template01(object01); console.log(newHTML); $("#example01").after(newHTML); /************************示例二:使用${data.title}指定替换的值******************/ var object02 = { data: { title: 'title02', content: 'content02' } }; var template02 = parseHTMLTemplate(function () { /* <div> <h2>${data.title}</h2> <div class="content">${data.content}</div> </div> */ }); var newHTML02 = template02(object02); console.log(newHTML02); $("#example02").after(newHTML02); </script> </body> </html>

这样就实现了在js中使用HTML模板避免动态拼接的方法，方便后期维护和代码清晰。

三、总结

本文是笔者对在js中使用HTML模板的一些总结，仅供大家学习参考，日常积累，希望对大家有所帮助。

本文标签：字符串模板 js html

版权声明：本文标题：js中使用HTML模板字符串内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686996049a126734.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。