正则表达式每日一学：探讨边界\b和\B的基本知识和应用法则 - Web前端

春节临近，归家心情很复杂，因为疫情也有些波动了，希望能回家过个年，大家一起祈祷吧！

今天我们来了解下正则表达式：探讨边界\b和\B的基本知识和应用法则。

定义

正则表达式中：

• \b 表示单词边界

• \B 表示非单词边界，应理解为（非单词）边界，而不是非（单词边界），它仍然匹配的是边界
  

边界

我将正则中的位置分为 字符的占位 和 字符的间隙。

字符的占位是显式的位置。

以 I'm iron man 为例。

肉眼可见的字母 符号 空格都是可以占位的字符，也就是可以用下标获取到字符的位置。

字符的间隙是隐式的位置。

即显示位置之间的位置，比如I和'之间的位置，字符串开头和I之间的位置等。

边界 指的是占位的字符左右的间隙位置。

单词

正则中所说的单词指的是 \w 可以匹配的字符，即数字、大小写字母以及下划线 [0-9a-zA-Z_]

\b 单词边界

单词边界匹配的就是这样的间隙位置：

左边占位的字符或右边占位的字符，至少有一个不是 \w

// 只有首尾位置匹配
console.log('0aZ_'.Replace(/\b/g, '.')) // .0aZ_.

// +不是\w，所以它的左右间隙都可以被匹配
console.log('a+a'.replace(/\b/g, '.')) // .a.+.a.

// 空格也不是\w，所以它的左右间隙都可以被匹配
console.log('a a'.replace(/\b/g, '.')) // .a. .a.

\B 非单词边界

理解了 \b，\B就好理解了。

它匹配的也是 边界 ，针对的是 与 \b 相反 的 非单词(\W)。

也就是，左右占位的字符，都必须是 \w。

或者说 所有不能被\b匹配的 边界。

console.log('0aZ_'.replace(/\B/g, '.')) // 0.a.Z._

console.log('a+a'.replace(/\B/g, '.')) // a+a.

console.log('a a'.replace(/\B/g, '.')) // a a

实例解析

单词边界：

var str = ' 2 ';//其中空格与2之间的位置叫做单词边界，匹配\b

非单词边界：

var str = ",,,,,和呵呵,,,,,";
var reg = '\B呵\B';//reg匹配中间的呵，其两侧都是字符，中间的位置为非单词边界。

统计以“,”分割的元素中“3”的个数：

var test = "137,1,33,4,3,6,21,3,35,93,2,98"; 
var count = test.match(test, "\b3\b").length; //结果：2

千分位分割数字，将输出成7,654,321这样的格式：

'7654321'.replace(/\B(?=(\d{3})+(?!\d))/g,',')
//7,654,321(匹配末尾是非数字，中间是连续3位数字整倍数的非单词边界)
 
'99893'.replace(/\B(?=(\d{3})+$)/g, ',')
// '99,893'

手机号344分割：

'12345678901'.replace(/\B(?=(?:\d{4})+$)/g, '-')
// '123-4567-8901'

大家可以去试试吧！

标签：基本知识边界法则正则表达式Web