Javascript正则入门

前言

最近遇到一个线上bug，小程序富文本编辑器的图片无法显示出来，查看报错发现是PC端上传图片时使用的是base64格式的图片，测试的时候传的图片都是比较小的图片，所以没有问题。一到线上，用户传的图片都PS处理过的大图，小程序富文本解析的时候由于过长会自动添加\r\n换行符,这样就导致图片显示不出来，百度说用正则把所有的\r\n替换成空字符串就行，就这么简单的正则居然都写不出来，突然意识到该学一下正则了，今天正好有空就来学习一下正则。

1.模糊匹配

模糊匹配分为两种，一种是匹配的字符个数不确定，如：{m,n}表示出现的次数在m和n之间；一种是匹配的的字符不确定，但是长度确定，如:[abc]。注：{}表示区间，()表示分组.[]表示可以选取的值

let reg = /ab{1,8}/g  // 表示全局匹配
let str = 'ab abb abbbbb'
console.log(str.match(reg)) // [ 'ab', 'abb', 'abbbbb' ]


let reg = /a[bcd]e/g
let str = 'abc abce ace ade'
console.log(str.match(reg)) // [ 'ace', 'ade' ] 中间的值只能从bcd中选一个

2.正则常用字符组

1).[]是最常用的字符组，表示可以从中选取的值，可以全部枚举，也可以使用-表示连续范围,[123456789]和[1-9]的意思是一样的，[abcde]和[a-e]也相同
2).^符号，表示除了^之后的字符都可以

let reg = /ab[^cde]c/g
let str = 'abcc abbc abfc abdc'
console.log(str.match(reg)) // [ 'abbc', 'abfc' ]

3.常见的缩写

1). \d表示数字[0-9]
2). \D表示除了数字之外的任意字符，即[^0-9]
3). \w表示数字字母下划线,即[0-9a-zA-Z_]
4). \W表示除了数字字母下划线之外的字符，即[^0-9a-zA-Z_]
5). \s表示表示空白符，包括空白符、水平制表符、垂直制表符、换行符、回车符、换页符,即[\t\v\n\r\f]
6). \S表示非空白符，即[^\t\v\n\r\f]
7). .表示通配符，可以匹配除了换行符、回车符、换页符之外的任意字符
8). {m,}表示可以匹配m到无限次，没有逗号{m}表示只能匹配m次
9). ? 匹配0-1次，有或者没有
10). +匹配1到n次
11). *匹配任意次

let reg = /\d{1,3}/g  // 匹配1到三个数字
const str = 'abc123 abc1 abc12 abc1234'
console.log(str.match(reg))  // [ '123', '1', '12', '123', '4' ] 1234被分成了两次

let reg = /abc(\d{1,3})?/g
let str = 'abc1 abc23 abc765 abc abc123456'
console.log(str.match(reg)) // [ 'abc1', 'abc23', 'abc765', 'abc', 'abc123' ]

let reg = /abc(\d{1,3})+/g
let str = 'abc1 abc23 abc765 abc abc123456'
console.log(str.match(reg)) [ 'abc1', 'abc23', 'abc765', 'abc123456' ]

4.分支

多个分支之间使用|分割，表示从几个分支中任选一个就行。

 let reg = /(abc{1,3})+|(123)+/g
 let str = 'abc abcabc abcabcabc abc123 123 123123'
 console.log(str.match(reg)) // [ 'abc', 'abcabc', 'abcabcabc', 'abc', '123', '123', '123123' ]

这些就是今天学习的内容，最简单的正则入门，学会这些就不会连匹配一个换行符都写不出来了，当然高深的写法还是得靠百度。