背景

在一次模板字符串替换的过程中，使用到了一些正则匹配某些指定的字符串，一时间没有反应过来。想来是自己的对最基础的正则不够吧，于是就看看文档了解。如下，替换 div 中的item.name 变量

let name = "sunseeres"
(<div class="list-index">${item.name}</div>).replace(/\$\{([\w\W]*?)\}/g,(str,$1)=>{
    return name
})

在vue或着react 之类的框架中我们都是这样写的，但是如果我们自己实现一个模板，那么又该怎么去匹配这里的name呢？

项目的具体实现

  <ul class="jsFood">
    <template>
        <li id="${id}">${name} <span class="delete">删除</span></li>
    </template>
  </ul>

替换里面的 name 属性

实现方式一

	// 模板变成可执行函数 
	String.prototype.interpolate = function(params){
		const names = Object.keys(params)
		const vals = Object.values(params)
		const str = new Function(...names,`return \`${this}\`;`)(...vals)
		return str
	}
('<li id="${id}">${name} <span class="delete">删除</span></li>').interpolate({name:'sunseekers',id:9})

实现方式二

let name = "sunseeres"
('<li>${name} <span class="delete">删除</span></li>').replace(/\$\{([\w\W]*?)\}/g,(str,$1)=>{
    return name
})

当时我用的是方式二实现的，因为方式二的兼容性比较好。

疑惑？？

=> 匹配前一个表达式 0 次或多次

? => 匹配前面一个表达式 0 次或者 1 次。

那么 *? 合在一起又怎么算呢？通过文档查找发现：如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪（匹配尽量少的字符）

举个例子

贪婪模式，没有？

"hello my name is ${name} , hello my name is ${name}".replace(/\$\{([\w\W]*)\}/g,(str,$1)=>{
    return 'sunseekers'
})
 // "hello my name is sunseekers"

这个就是贪婪模式了，他发现后面还有${}的时候，他把两个合并了，在实现的时候我们希望的是一个每一个${}都被单独匹配，而不是一股脑子的全部替换

非贪婪模式，有？

"hello my name is ${name} , hello my name is ${name}".replace(/\$\{([\w\W]*?)\}/g,(str,$1)=>{
    return 'sunseekers'
})
 // "hello my name is sunseekers , hello my name is sunseekers"

除了 ?* 还有别的组合吗？

(?:x) => 表示不记住该捕获

举个例子吧

捕获的情况

"hello my name is ${name} , my age is ${age}".replace(/\$\{([\w\W]*?)\}/g,(str,$1)=>{
    console.log($1)
})
// $1 表示匹配到的第一个 括号里面的东西，

非捕获的情况

"hello my name is ${name} , my age is ${age}".replace(/\$\{(?:[\w\W]*?)\}/g,(str,$1)=>{
    console.log($1)
})
// $1 是一个下标值，匹配到的子字符串在原字符串中的偏移量，因为没有被捕获，就记住了后面的一个值

为补充

还有很多的组合，因为暂时还没有在项目中用到，或者是看到，所以暂时先不做表述，留着下次。哈哈

sunseekers

正则表达式

背景

项目的具体实现

疑惑？？

除了 ?* 还有别的组合吗？

为补充

文档信息

Search

Table of Contents