js正则分析案例——以JSON格式校验为例

[TOC]

缘起

最近在研究javascript中对各种数据类型与格式的判断，以及各种第三方库提供的字符串处理方法，发现有大量的地方运用了正则，并且有些正则及其复杂。对于上层应用开发人员来说，正则可能用到的地方并不是太多，最常用的无非就是表单验证，而那些常见的表单验证正则网络上也是一搜一大堆，自然不需要自己再去构建。

但是，作为一名开发人员，肯定不甘于一直做一个“工具小子”，而希望自己也能写出一些更底层的代码，甚至是开发一些底层的库来供别人使用，所以正则就成为了一个绕不过去的坎。

当我们决定自己写正则的时候，总是会先去看看前辈们是如何写的，毕竟站在巨人的肩膀上才能站得更高。所以解读正则就是一个不可获取的技能。

今天，我们就拿一个校验JSON格式的正则来示范一下如何拆解复杂的正则表达式，以方便我们更好地阅读和理解大神们的源码。BTW，也可以借机更深入的了解下JSON规范。

JSON

JSON是一种被广泛应用于各种编程语言的数据交换格式，下面是JSON格式的官方说明，阅读它有助于更好地理解本文内容：

JSON介绍

建议对照这份说明食用本文，会更加香甜。

另外，也可以同时对照javascript正则表达官方说明来阅读本文：

javascript正则表达式

javascript判断一个字符串是否为JSON格式

下面这段代码来自于网络，是使用正则判断一个字符串是否为JSON字符串：

var isJSON = function (str){
        if (/^[\],:{}\s]*$/.test(str.replace(/\\["\\\/bfnrtu]/g, '@').
    replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
    replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
        return true;
    }else{
        return false;
    }
    
}

解读过程

为了更直观地理解上面这段代码是如何判断JSON格式字符串的，我们准备了一段复杂的但合法的JSON字符串，一步一步来理解上面这段代码的正则替换与校验过程。我们准备的JSON数据如下：

{
  "array": [
    1,
    -2,
    2.22,
    3e12, 
    -32.1e-12,
    [1,2,3],
    {
      "abc":123.34
    }
  ],
  "boolean": true,
  "null": null,
  "number": 123,
  "object": {
    "a": "b",
    "c": "d",
    "e": "f",
    "subarray":[1,2,3,4]
  },
  "string": "Hello World",
  "string2":"\\babc\\"def\\fh\\rjkl\\nmn\sss\\tie\\uABCF"
}

我们将它格式化为字符串：

var str = '{"array":[1,-2,2.22,3e12,-32.1e-12,[1,2,3],{"abc":123.34}],"boolean":true,"null":null,"number":123,"object":{"a":"b","c":"d","e":"f","subarray":[1,2,3,4]},"string":"Hello World","string2":"\\babc\\"def\\fh\\rjkl\\nmn\sss\\tie\\uABCF"}';

第一步 整体分析

上面的isJson() 方法中，实际上执行了以下几个步骤：

1. 对字符串执行了正则替换，将一部分内容替换为@符号：str.replace(/\\["\\\/bfnrtu]/g, '@')

2. 继续对字符串执行正则替换，将上一步结果的一部分内容替换为]号：

   replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')

3. 继续对上一步结果执行正则替换，将部分内容替换为空白符

4. 对上一步的结果执行了正则校验：/^[\],:{}\s]*$/.test()

5. 上一步test()方法返回一个布尔值，作为if判断的最终条件，得到结果

第二步 分步骤解析

1. 替换控制字符为@符号

我们看这个正则：str.replace(/\\["\\\/bfnrtu]/g, '@')

在上文的链接的JSON介绍页面中，介绍了JSON合法字符串值可接受的控制字符，如下图：

/\\["\\\/bfnrtu]/g
这条正则代表JSON标准中规定的可接受的特殊字符，由于反斜杠（\）为转义字符，所以我们先将正则首尾的斜杠和特殊符号之前的转义去掉，得到：
    * \["\/bfnrtu]，即 “\” 后面加上 【"\/bfnrtu】中的其中一个字符([]内的为字符组，在正则中代表其中一个)：
    *  \" 双引号
    *  \/ 斜杠
    *  \\ 反斜杠
    *  \b --backspace  后退符号
    *  \f--formfeed  换页符号
    *  \n--linefeed  换行符号
    *  \r--carriage return  回车符号
    *  \t--horizontal tab  垂直制表符
    *  \u--unicode编码  

我们对我们准备的那一段JSON字符串做同样的操作：

var str1 = str.replace(/\\["\\\/bfnrtu]/g, '@');
console.log(str1);

得到：

{"array":[1,-2,2.22,3e12,-32.1e-12,[1,2,3],{"abc":123.34}],"boolean":true,"null":null,"number":123,"object":{"a":"b","c":"d","e":"f","subarray":[1,2,3,4]4]},"string":"Hello World","string2":"@abc@def@h@jkl@mnsss@ie@ABCF"}

可以发现，这段正则替换将原始JSON中 string2的值进行了替换，因为它的值中间包含了控制字符：

"string2":"\\babc\\"def\\fh\\rjkl\\nmn\sss\\tie\\uABCF"
// =>
"string2":"@abc@def@h@jkl@mnsss@ie@ABCF"

大家一定注意到了，上面正则分析中是一个反斜杠加上一个控制字符， 而我么原始字符串中缺失两个斜杠加上控制字符，这是因为我们在JSON字符串中依然需要对控制字符前面的反斜杠进行转义，所以必须在前面再加一个反斜杠来承担转义的工作，否则将不会通过校验。

而\s前面为什么没有转义呢，因为它不属于JSON规范中的控制字符，它只单纯地表示空格。

2. 替换键名和值为右中括号

replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')

我们将正则部分拆解如下：
1.去掉正则格式符(/,/g)：

​ "[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?

2. 分支结构(即使用|隔开的部分)，有以下分支：
   * "[^"\\n\r]"
   * 双引号（"）后面跟上除了（^在正则中代表“非”，即“不是xxx”）【",,\n,\r】之外的任意字符任意次（量词在正则中代表任意次），后面再跟一个双引号（"）这一步其实匹配双引号包含的所有内容，而我们知道，在合法JSON字符串中，键名是必须用双引号包含的，而合法值里的 string类型也是必须用双引号包含起来的。
   • true
   • false
   • null
   • -? \d+ (?: \.\d*)? (?: [eE] [+\-]? \d+)?【匹配number】
     • 0个【即正数】或者1个负号（-）【即负数】,（？在正则中代表0个或1个）
     • 后面跟上1个以上的数字（\d），
     • 再跟上零组【有可能没有小数部分】或一组（括号为分组，?:代表非捕获分组）一个点后面跟上任意个数字【数字的小数部分】,
     • 再跟上指数部分（e或E后面跟上数字[可正可负]）
3. 所以这一步实际上就是把合法的json键名和值（string/true/false/null/number）替换为右中括号

来看看我们准备的JSON字符在这一步后被替换为什么样：

var str2 = str1.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']');
console.log(str2);

{]:[],],],],],[],],]],{]:]}],]:],]:],]:],]:{]:],]:],]:],]:[],],],]]},]:],]:]}

3. 替换行首位置、冒号、逗号为空白符

replace(/(?:^|:|,)(?:\s*\[)+/g, '')

去掉正则格式符，得到：

(?: ^|:|, )(?: \s* \[ )+

• 有两个非捕获分组
  • 第一组：^|:|, 即匹配行首位置（^）或冒号(:)或逗号(,)
  • 第二组：\s*\[ 即匹配任意个（*）空格（\s）后面跟左中括号（\[），这种组合可能出现1到多次【应对多层嵌套的情况】
  • 最后匹配的就是第一组中的其中一个符号后面跟上第二组格式的字符串，比如 :[ 或者 ,[这样的

看看我们的JSON字符串在这一步后变成了什么样：

var str3 = str2.replace(/(?:^|:|,)(?:\s*\[)+/g, '');
console.log(str3);

{]],],],],]],],]],{]:]}],]:],]:],]:],]:{]:],]:],]:],]],],],]]},]:],]:]}

4. 使用test()方法校验

/^ [\],:{}\s]* $/.test(str3)

看正则部分： /^ [ \] , : { } \s ]* $/

即行首后面跟上【右中括号（注意转义）,逗号,冒号，左大括号，右大括号，空格】中的任意一个字符任意次，然后是行尾

根据这个规则，我们的JSON字符串成功通过了校验。

本文就到这里， 希望可以对您有所帮助。

本文由博客一文多发平台 OpenWrite 发布！