js中正则短小精悍,断言不匹配,匹配可捕获,捕获能引用,全局都来一次。
问题
已知含有n个变量的字符串,要求将变量替换为对应的值,如 n o = 5 , no=5, 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
方法,避免过多使用循环,巧妙使用对象键值对映射特性,实现值替换。
正则括号内以问号为前导是为断言,用于辅助匹配,而匹配是助力捕获,捕获通常是为了引用。