笔试之 模板变量替换

js中正则短小精悍，断言不匹配，匹配可捕获，捕获能引用，全局都来一次。

问题

已知含有n个变量的字符串，要求将变量替换为对应的值，如$no=5,$title=‘jack’

<div> <p> {$no}</p> <p> {$title}</p> </div>

思路

1. 定义正则查找$ 字符串变量
2. 构建变量键与变量值的映射对象
3. 使用原生 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方法，避免过多使用循环，巧妙使用对象键值对映射特性，实现值替换。
正则括号内以问号为前导是为断言，用于辅助匹配，而匹配是助力捕获，捕获通常是为了引用。