基于JS正则表达式实现模板数据动态渲染(实现思路详解)

最近业务上需要动态渲染模板数据，好久没写前端代码了，有点生疏，将思路简单写下来，防老：

一、业务需求：

1.前端后端定义好模板以及变量名，保存数据库

2.订单数据是前端根据支付结果获取的，最终渲染完的数据模板需要调用打印机打印出来

3.模板相对商家来说比较固定，但是每个商家需要的模板都有可能不一样，所以需要每次登录后，查询一次模板缓存前端，后续每次支付后，动态渲染数据即可

二、考点：

1.正则表达式

2.精简代码量，尽量减少前端的工作量​

三、实现思路：

1.需要渲染数据的模板，以${变量名}区分：

var t="银行：${bankName}，商家名称：${merchantName}，订单号：${orderNum}";

2.正则匹配获取所有变量名

var keys=[];
var arr = t.match(/\$\{(.*?)\}/g);
for(var key in arr){
  var s=arr[key].replace("${","").replace("}","");
  keys.push(s);
}
alert(keys);

3.组装订单数据，注意变量属性名与模板里的变量名要保持一致

var order={
 "bankName": "工行",
 "merchantName": "小卖部",
 "orderNum": "123456"
};

4.渲染数据

for(var i=0;i<keys.length;i++){
 var key=keys[i];
 var value=order[key];
 t= t.replace("${"+key+"}",value);
}
alert(t);

5.查看效果：

6.有人会说，直接拼接字符串不是更快？比如：

var t=`银行：${order.bankName}，商家名称：${order.merchantName}，订单号：${order.orderNum}`;

这种方式在模板固定且数据量少的时候是挺好用的，但是业务上，虽然模板和数据对于商家来说相对固定，但是系统里面很多商家，每个商家的小票模板可能都不一样，需要渲染的变量也挺多，前端不可能根据每个商家都改一套模板的，总而言之，适合才是最好的！

到此这篇关于基于JS正则表达式实现模板数据动态渲染的文章就介绍到这了,更多相关js 正则模板数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用jQuery模板来展现json数据的代码

    完整代码: 复制代码 代码如下: $.fn.parseTemplate = function(data) { var str = (this).html(); var _tmplCache = {} var err = ""; try { var func = _tmplCache[str]; if (!func) { var strFunc = "var p=[],print=function(){p.push.apply(p,arguments);};" + &

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • 基于jQuery的AJAX和JSON实现纯html数据模板

    基于jQuery的AJAX和JSON实现纯html数据模板

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> &

  • php使用QueryList轻松采集js动态渲染页面方法

    QueryList使用jQuery的方式来做采集,拥有丰富的插件.下面来演示QueryList使用PhantomJS插件抓取JS动态创建的页面内容. 一.安装 使用Composer安装: 1.安装QueryList composer require jaeger/querylist GitHub: https://github.com/jae-jae/QueryList 2.安装PhantomJS插件 composer require jaeger/querylist-phantomjs Git

  • 基于HTML模板和JSON数据的JavaScript交互(移动端)

    写本文之前,我正在做一个基于Tab页的订单中心: 每点击一个TAB标签,会请求对应状态的订单列表.之前的项目,我会在js里使用 + 连接符连接多个html内容: var html = ''; html += '<div class="empty-list">' + '<div class="icon icon-box"></div>'+ '<div>还没有订单</div>'+ '</div>';

  • 基于JS正则表达式实现模板数据动态渲染(实现思路详解)

    最近业务上需要动态渲染模板数据,好久没写前端代码了,有点生疏,将思路简单写下来,防老: 一.业务需求: 1.前端后端定义好模板以及变量名,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板需要调用打印机打印出来 3.模板相对商家来说比较固定,但是每个商家需要的模板都有可能不一样,所以需要每次登录后,查询一次模板缓存前端,后续每次支付后,动态渲染数据即可 二.考点: 1.正则表达式 2.精简代码量,尽量减少前端的工作量​ 三.实现思路: 1.需要渲染数据的模板,以${变量名}区

  • 基于js 各种排序方法和sort方法的区别(详解)

    今天突发奇想,想明白sort方法是否比各种排序都有优势,所以就参考别人的代码,做了一个测试,结果令人惊讶啊,上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,max

  • 基于Python的Post请求数据爬取的方法详解

    为什么做这个 和同学聊天,他想爬取一个网站的post请求 观察 该网站的post请求参数有两种类型:(1)参数体放在了query中,即url拼接参数(2)body中要加入一个空的json对象,关于为什么要加入空的json对象,猜测原因为反爬虫.既有query参数又有空对象体的body参数是一件脑洞很大的事情. 一开始先在apizza网站 上了做了相关实验才发现上面这个规律的,并发现该网站的请求参数要为raw形式,要是直接写代码找规律不是一件容易的事情. 源码 import requests im

  • 利用IntersectionObserver实现动态渲染的示例详解

    目录 前言 实现 懒加载组件 长列表组件示意 测试 前言 开发表格时,希望支持可视后的动态加载.在查找资料做了一些尝试后,最终使用IntersectionObserver,相对方便地实现了该功能 IntersectionObserver诞生已经有几年了,所以它的兼容性目前已经达到可以使用的程度了.具体兼容程度以及详细API可参考CDN 实现 懒加载组件 核心就是利用了IntersectionObserver的能力,封装了LazyContainer组件,该组件的children,只有在视口中可见时

  • JS实现简单的选择题测评系统代码思路详解(demo)

    JS实现简单的选择题测评系统代码思路详解(demo)

    包含内容:JS封装表单,JS校验表单 说是测评系统,感觉只能算是一个小小的Demo,很水,,没有数据库库,,仅使用JS做简单的选择题测评系统 -------------------------------------------------------------------------------- 一.设计思路 表单封装: [1]由于采用JS封装提交所以,不需要form标签 [2]放置多个input标签,作为输入项 [3]编写JS获取输入项,并通过get方式提交到另一个页面 校验表单(显示结

  • python正则表达式从字符串中提取数字的思路详解

    python从字符串中提取数字 使用正则表达式,用法如下: ## 总结 ## ^ 匹配字符串的开始. ## $ 匹配字符串的结尾. ## \b 匹配一个单词的边界. ## \d 匹配任意数字. ## \D 匹配任意非数字字符. ## x? 匹配一个可选的 x 字符 (换言之,它匹配 1 次或者 0 次 x 字符). ## x* 匹配0次或者多次 x 字符. ## x+ 匹配1次或者多次 x 字符. ## x{n,m} 匹配 x 字符,至少 n 次,至多 m 次. ## (a|b|c) 要么匹配

  • 基于Android studio3.6的JNI教程之helloworld思路详解

    jdk环境变量配置: path中增加下面2个路径,也就是android studio的路径,android有自带的jdk. E:\Android\Android Studio\jre\bin E:\Android\Android Studio\bin 新建工程: 一定要选择Native c++类型,最后要选c++11支持. SDK设置: File->Settings File->Project Structure 首先确定工程的目录结构,然后尝试运行一下工程,使用模拟器,确保工程没问题, 在M

  • 基于Apache Hudi在Google云构建数据湖平台的思路详解

    基于Apache Hudi在Google云构建数据湖平台的思路详解

    自从计算机出现以来,我们一直在尝试寻找计算机存储一些信息的方法,存储在计算机上的信息(也称为数据)有多种形式,数据变得如此重要,以至于信息现在已成为触手可及的商品.多年来数据以多种方式存储在计算机中,包括数据库.blob存储和其他方法,为了进行有效的业务分析,必须对现代应用程序创建的数据进行处理和分析,并且产生的数据量非常巨大!有效地存储数PB数据并拥有必要的工具来查询它以便使用它至关重要,只有这样对该数据的分析才能产生有意义的结果.大数据是一门处理分析方法.有条不紊地从中提取信息或以其他方式处

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

  • angularjs循环对象属性实现动态列的思路详解

    angularjs循环对象属性实现动态列 优点:保存对象,在数据库只保存一条数据 缺点:添加对象属性需要修改表结构.代码,然后重新重新发布 实现思路 1)数据库创建表(对象).创建字段(对象属性) 2)根据表(对象).字段(对象属性)生成配置表 3)根据表(对象).字段(对象属性)生成三层架构 4)demo代码如下 1.接口代码: using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Logging; using Newtonsof

随机推荐