\b: 匹配单词边界
\B: 匹配非单词边界
\w: 查找数字、字母及下划线
\W: 查找非单词字符
先看看单词边界:
- 大概意思就是一个单词左右边界的意思,不同则为界,界左和界右肯定不是相同类型;
- 如:\w界\W;
- 边界是只匹配位置, 不匹配字符,即零宽边界;
- 举例上面单词 This 左右各一个边界,左边边界的右端是单词, 而左端不是,右边的边界左边是单词,右边是空格,不同则为界
再看看非单词边界:
- 何谓非边界? 同类无界;
- 如:\w(无界)\w 或 \W(无界)\W;
- 还是拿 This 举例,This 中匹配到三处非单词边界,都是字母挨着字母形成的,字母和字母是同类;
- 还有上面挨着的三个空格包含两个非单词边界,空格和空格是同类
现在来看看实际应用场景:
- vue源码中将驼峰的字符串转换成字符号连接;
- 如:将 myAddress 转化成 my-address ;
var hyphenateRE = /\B([A-Z])/g;
var hyphenate = cached(function (str) {
return str.replace(hyphenateRE, '-$1').toLowerCase()
});
console.log(hyphenate('myAddress')) // my-address
- 上面正则的意思是匹配所有:非单词边界 + 大写字母;
- 上面的 yA 之间包含一个非单词边界,即匹配到的内容就是 :(无界)A;
- str.replace(hyphenateRE, '-$1') 这句话的意思就是把匹配到的内容替换成其前面带字符号的内容,即把上面的 (无界)A 替换成 -A;
- 此时 myAddress 处理后得到的内容是 my-Address
- toLowerCase() 即把替换后的内容转成纯小写
- 所以得到的就是 my-address