js正则分析案例——以JSON格式校验为例
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()
方法中,实际上执行了以下几个步骤:
- 对字符串执行了正则替换,将一部分内容替换为
@
符号:str.replace(/\["\/bfnrtu]/g, '@')
- 继续对字符串执行正则替换,将上一步结果的一部分内容替换为
]
号:
replace(/"[^"\nr]*"|true|false|null|-?d (?:.d*)?(?:[eE][ -]?d )?/g, ']')
- 继续对上一步结果执行正则替换,将部分内容替换为空白符
- 对上一步的结果执行了正则校验:
/^[],:{}s]*$/.test()
- 上一步
test()
方法返回一个布尔值,作为if
判断的最终条件,得到结果
第二步 分步骤解析
1. 替换控制字符为@
符号
我们看这个正则:str.replace(/\["\/bfnrtu]/g, '@')
在上文的链接的JSON介绍
页面中,介绍了JSON
合法字符串值可接受的控制字符,可参阅该页面string
格式部分
/\\["\\\/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):
"[^"\nr]*"|true|false|null|-?d (?:.d*)?(?:[eE][ -]?d )?
- 分支结构(即使用|隔开的部分),有以下分支:
- "[^"\nr]*"
- 双引号(")后面跟上除了(^在正则中代表“非”,即“不是xxx”)【",,n,r】之外的任意字符任意次(*量词在正则中代表任意次),后面再跟一个双引号(")这一步其实匹配双引号包含的所有内容,而我们知道,在合法`JSON`字符串中,键名是必须用双引号包含的,而合法值里的 string类型也是必须用双引号包含起来的。
- true
- false
- null
-? d (?: .d*)? (?: [eE] [ -]? d )?
【匹配number】- 0个【即正数】或者1个负号(-)【即负数】,(?在正则中代表0个或1个)
- 后面跟上1个以上的数字(d),
- 再跟上零组【有可能没有小数部分】或一组(括号为分组,?:代表非捕获分组)一个点后面跟上任意个数字【数字的小数部分】,
- 再跟上指数部分(e或E后面跟上数字[可正可负])
- 双引号(")后面跟上除了(^在正则中代表“非”,即“不是xxx”)【",,n,r】之外的任意字符任意次(*量词在正则中代表任意次),后面再跟一个双引号(")这一步其实匹配双引号包含的所有内容,而我们知道,在合法`JSON`字符串中,键名是必须用双引号包含的,而合法值里的 string类型也是必须用双引号包含起来的。
- "[^"\nr]*"
- 所以这一步实际上就是把合法的
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 发布!
js正则分析案例——以JSON格式校验为例相关推荐
- Excel VBA 入门demo,单元格json格式校验
需求才是学习的第一生产力,学习VBA是因为要帮测试同学解决excel中的值校验问题.具体来讲,需要对指定单元格做数据格式校验,必须是json,不是json或者格式不对的,要有提示. 解决问题的方案很多 ...
- JS 判断字符串是否为JSON格式
JS 判断字符串是否为JSON格式 参数:字符串 function strIsJSON(str) {// 判断是否为字符串if (typeof str == 'string') {try {// 解析 ...
- C语言json格式校验
C语言json格式校验 最近用到json格式数据传输信息,在C语言中使用cjson解析json字符串,若json格式不正确,会使整个进程直接挂掉.想到能否在解析前先进行格式校验,通过后再解析,查找资料 ...
- json格式校验并显示错误_使用postman做自动化接口校验
要想实现接口的自动化测试,需要以下几个步骤: 自动登录 首先点击postman左上角的new按钮,创建一个collection,在pre-request-scripts标签下,给整个collectio ...
- json格式校验报错:此处缺少‘STRING‘字符, 实际上是一个 ‘}‘
报错: 此处缺少'STRING'字符, 实际上是一个 '}' Expecting 'STRING', got '}' 格式校验工具: https://json-online.com/check/ 解决 ...
- 什么是接口测试?接口测试基础、案例及Json格式详解
很多小伙伴可能会说接口真的有测试的必要吗? 我只要把功能测试好了不就ok了吗? 答案是肯定的,在中大型项目中,后端.前端多人协同开发过程中,接口测试是必要的. 什么是接口(API)测试? API全称( ...
- python 将JS(JavaScript)的json格式字符串转换为python的字典格式
文章目录 1.需求: 2.如何将js的json转python字典 1.需求: 比如我从js的字符串中提取出JavaScript的json字符串,然后找到一个很好的模块.demjson: 但是我的电脑, ...
- 在线JSON格式校验网址
推荐个一直在用的json格式化的网址: BeJson :http://www.bejson.com/ 新版本:点击如下按钮进入新版
- php输出json到表格,PHP中把数据库查询结果输出为json格式
header("Content-type:text/html;charset=utf-8");//字符编码设置 $servername = "localhost" ...
最新文章
- Java 9 揭秘(14. HTTP/2 Client API)
- React JSX 实例图解
- /bin/bash^M: bad interpreter
- 确保字符串的每个单词首字母都大写,其余部分小写
- 启明云端分享| 基于SSD201核心板的4.3寸彩屏开发板接口相关说明
- 十二、程序返回、数据类型表示、代码注释
- JS中的六大数据类型 (笔记0)
- 张钹院士:探索第三代人工智能,需要勇闯无人区的人才!
- GBDT原理及利用GBDT构造新的特征-Python实现
- HttpClient之Java爬虫工具
- ejb2.0详细开发过程
- 计算机系统应用 莫军,ARINC653分区操作系统多核处理器任务调度设计
- 利用Bandzip批量解压缩文件
- IDEA 从入门到踩坑(4)-No tests found for given includes 错误解决
- MFC中TXT文件读写
- 国足3比1叙利亚,晋级世预赛12强赛,国足会在12强赛中取得怎样的成绩呢?
- 商标权的取得方式有哪些
- 装完 Ubuntu 安装常用的软件
- 盘点分析 | 2021第一季度国内外重大数据泄漏事件
- mac 无法访问浏览器
热门文章
- python录音pyaudio_『开发技巧』Python音频操作工具PyAudio上手教程
- 裸辞4个月后,他的人生都经历了什么
- 【移动支付的移动支付平台创新趋势】移动支付平台未来发展趋势与挑战
- 在多线程中输出时间戳是否会重复
- 这7个渗透测试工具你都不知道?还好意思叫白帽子!
- mongoDB客户端工具MongoVU
- Lowest Common Ancestor问题的解决思路
- Spring高手之路7——事件机制与监听器的全面探索
- matlab某数组中产生不重复随机数,数组的随机排序,randperm函数numel,X=X(A)函数
- 如何给自己创造一个快乐的工作环境