笔试之 模板变量替换
0 / 0 / 创建于 5年前 /
pardon110 的个人博客
js中正则短小精悍，断言不匹配，匹配可捕获，捕获能引用，全局都来一次。
问题
已知含有n个变量的字符串，要求将变量替换为对应的值，如$no=5,$title='jack'
<div> <p> {$no}</p> <p> {$title}</p> </div>思路
- 定义正则查找
$字符串变量 - 构建变量键与变量值的映射对象
- 使用原生 replace 函数进行正则替换，避免循环
实现
str = "<div> <p> {$no}</p> <p> {$title}</p> </div>"
// 1. 创建正则实例
var re = /(?<=\{)(\$\w+)(?=\})/g
// 2. 构建替换对象
var o = {'no':5, 'title':'jack'}
// 3.执行替换
var res = str.replace(re, m => o[m.substr(1)])
// 4.测试
console.log(str)
console.log(res)效果
<div> <p> {$no}</p> <p> {$title}</p> </div>
<div> <p> {5}</p> <p> {jack}</p> </div>小结
全局正则，使用了前后向断言，中间匹配捕获。
原生replace方法，避免过多使用循环，巧妙使用对象键值对映射特性，实现值替换。
正则括号内以问号为前导是为断言，用于辅助匹配，而匹配是助力捕获，捕获通常是为了引用。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号