JS使用正则+JSON对HTML模板进行数据填充

本文介绍了如何在WEB前端开发中利用JavaScript的正则表达式和JSON数据来实现HTML模板的数据填充。通过扩展String类的方法,将JSON数据插入到含有特定标识的HTML模板中,实现动态内容的展示。示例代码展示了如何处理模板、获取服务器数据并进行填充,强调了使用`<script>`标签存储模板以避免DOM污染和不必要的执行。

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

在WEB前端开发中,经常会根据动态的数据加载一些具有相同结构、不同内容的HTML控件,如果把这些HTML代码全写入JS中,根据不同的数据显示的控件也不一样,操作起来会显得比较繁琐,而且极不利于代码的维护,怎么办呢?不知道你是否听说过模板,模板渲染,数据填充。使用模板方法,直接把数据往里面套就好了。憋说话,先上个示例,用心去感受。

这里有个非常重要的方法,此方法是对原生js的string类进行的扩展,也就是我们要用来填充格式数据的方法。

JS:

String.prototype.tmp = function(obj) {
    return this.replace(/\$\w+\$/g, function(matchs) {
        var returns = obj[matchs.replace(/\$/g, "")];
        return (returns + "") == "undefined"? "": returns;
    });
};

方法定义好了,接下来写好HTML模板:
HTML:

<div class="container">
    <ul class="list_box" id="list_box">
        <script type="text/template" data-id="list_tpl">
            <li class="list_item">
                <h3>$title$</h3>
                <p>$content$</p>
            </li>
        </script>
    </ul>
</div>

不知道慧眼如炬的你有没有注意到这段HTML与普通的HTML有什么不同之处,首先是script标签,标签里有type=”text/template”属性;其次就是

### JMeter 正则表达式提取器和 JSON 提取器使用教程 #### 3.1 正则表达式提取器参数详解 正则表达式提取器是 JMeter 中用于从服务器响应中提取数据的一种组件。该工具利用正则表达式来匹配响应内容并提取其中特定部分的数据[^1]。 - **名称**: 组件的描述性名称,在测试计划树中显示。 - **应用范围**: 可以设置为仅应用于当前采样器或其子级采样器。 - **要分析的内容**: 指定是从主体还是头部或其他位置抽取信息。 - **正则表达式**: 输入用来定义目标模式的正则表达式字符串。 - **模板 (Template)**: 定义如何构建最终输出;默认情况下,`$` 表示第一个捕获组。 - **匹配编号 (Match No.)**: 如果有多个匹配项,则指定哪一个被选作结果;0 随机选取任意一项,负数表示全部返回。 - **缺省值 (Default Value)**: 当没有任何匹配发生时所使用的替代文本。 ```java // 示例 Java 代码展示简单的正则表达式操作 String regex = "(\\d{4})-(\\d{2})-(\\d{2})"; // 匹配日期格式 YYYY-MM-DD Pattern pattern = Pattern.compile(regex); Matcher matcher = pattern.matcher("Date is 2023-09-18"); if (matcher.find()) { System.out.println(matcher.group(0)); // 输出整个匹配串 "2023-09-18" } ``` #### 4.1 JSON 提取器参数详解 对于结构化的 JSON 数据来说,JSON 提取器提供了更方便的方式来进行解析和提取。此功能允许通过路径查询语言(如 JsonPath)定位到具体的字段或属性,并将其作为变量存储起来供后续请求使用[^2]。 - **名称**: 同上。 - **适用对象**: 类似于正则表达式的选项,决定作用域。 - **JSON Path Expressions**: 编写遵循标准语法的表达式以指向所需节点。 - **默认值**: 若找不到符合条件的结果,默认采用设定好的备用值填充。 ```javascript // JavaScript 实现了一个基本的例子说明如何用 jsonpath 来访问嵌套的对象成员 var data = {"store": {"book":[{"category":"fiction","title":"Harry Potter"},{"category":"non-fiction","title":"Learning Python"}]}}; console.log(data.store.book[0].title); // 打印 Harry Potter ``` #### 应用实例对比 当面对非结构性较强的HTML页面源码或者其他形式松散的文字流时,推荐优先考虑正则表达式方法[^3]。然而如果是API接口调用产生的标准化JSON文档,则应该倾向于选择专门针对此类情况设计优化过的JSON提取手段[^4]。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值