利用正则表达式进行复杂文本的分割

308 阅读1分钟

js字符串的split方法大家都应该很熟悉,比如我们可能经常看到如下使用来获取cookie

  document.cookie.split(';')

但是如果我们需要使用多种不同的分割符呢?比如 'a + b -c + z',我们需要将其按照不同的运算符来拆分,这时候便可以使用正则表达式来当作分隔符。

1、按照'+''-'符号进行分割

'a  +   b -c +   z'.split(/\+|\-/)
// 结果:['a ', ' b ', 'c ', ' z']

2、为什么不去除分割结果的空格呢?

'a  +   b -c +   z'.split(/\s*(\+|\-)\s*/)
//结果:['a', '+', 'b', '-', 'c', '+', 'z']

注意:一定要将**+|-** 用括号括起来,因为我们想分割的特征是 任意个空格后面跟着加号或者减号,再跟着任意个空格, 而不是任意个空格后面跟着加号,或者减号跟着任意个空格

3、可能我们并不想要加号或者减号

'a  +   b -c +   z'.split(/\s*(?:\+|\-)\s*/)
// 结果:['a', 'b', 'c', 'z']

注意:之所以不使用 ?: 会导致加号和减号出现在分割结果中是因为:当我们使用正则进行分割时,如果正则中存在捕获,捕获的内容会被直接拼接到分割结果中。

我们再看点更实际的例子,比如我们需要将svg的路径绘制到canvas上,这时便可以通过正则来将svg的路径分割成一个个的绘制命令,然后将其转换成canvas的绘制命令(更为简洁的做法是使用canvas的path2D方法进行绘制),方法实现过长,有兴趣的可以访问github源码 github.com/woaiyan/pat…