JS正则表达式中\b和\B的含义及使用示例

JavaScript RegExp 对象

\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