前言
最近遇到一个线上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' ]
这些就是今天学习的内容,最简单的正则入门,学会这些就不会连匹配一个换行符都写不出来了,当然高深的写法还是得靠百度。