1. 创建正则表达式
- 字面量方式
let reg = /+86\d{11}/g
- 构造函数方式创建
let name = 'jirengu'
let reg = new RegExp('www.'+name+'.com', 'g')
let reg = /+86\d{11}/g
- g :全文搜索,不添加的话搜索到第一个结果停止搜索
- i : 忽略大小写,默认大小写敏感
- m:多行搜索
2. 专用字符
•具有特殊意义的字符
[ { \ ^ $ | ) ? * + .
如果要匹配这些特殊字符,需要转义\
3. 正则表达式的几种规则
单字符匹配
- [abcd] 匹配一个字符,是a b c d中的任意一个
- [0-9] 匹配一个是0到9的数字
- [a-zA-Z] 匹配一个不限制大小写的字母
- [^abc] 表示一个不是字符a或b或c的字符
let reg = /jirengu/
console.log( reg.test('hello jirengu') ) // true
let reg2 = /#[0-9a-f][0-9a-f][0-9a-f]/
console.log( reg2.test('x#0f0x') ) //true
console.log( reg2.test('x#h8jx') ) // false
let reg3 = /[Jj]irengu/
console.log( reg3.test('hi jirengu') ) // true
console.log( reg3.test('hi Jirengu') ) // true
console.log(/\[hello\]/.test('[hello]') ) // true
预定义匹配
- . 等价于[^\r\n],匹配一个除回⻋ 和换行以为的任意字符
- \d 等价于[0-9],匹配一个数字字符
- \D 等价于[^0-9], 匹配一个非数字字符
- \s 等价于[空格\t\n\r\v\f],匹配一个空白字符
- \S 等价于[^空格\t\n\r\v\f],匹配一个非空白字符
- \w 等价于[a-zA-Z_0-9],匹配一个字母、数字、下划线
- \W 等价于[^a-zA-Z_0-9],匹配一个非单词字符
let str = 'he-llo jirengu, hello world'
let arr1 = str.split(/\s/)
console.log(arr1) //['he-llo', 'jirengu,', 'hello', 'world']
let arr2 = str.split(/\W/).filter(v => v!=='')
console.log(arr2) //['he', 'llo', 'jirengu', 'hello', 'world']
let str2 = str.replace(/\s/g, '')
console.log(str2) //"he-llojirengu,helloworld"
0个或多个
? 前面的字符出现0次或者1次
+ 前面的字符出现1次或者多次
* 前面的字符出现0次或者多次
{n} 前面的字符出现n次
{n,m} 前面的字符出现n到m次
{n,} 前面的字符出现至少n次
let reg1 = /\d{11}/
console.log( reg1.test('12345678901') ) //true
let reg2 = /\d{2,4}/ //注意逗号后没空格
console.log( reg2.test('1234') ) //true
let reg3 = /https?:\/\/jirengu\.com/
console.log( reg3.test('https://jirengu.com') )//true
console.log( reg3.test('http://jirengu.com') )//true
边界
- /^xyz/ 以xyz开头
- /abc$/ 以abc结尾
- /\babc\b/ 匹配是单词的abc(左右两侧是字符串开头、结尾、中横线、空格)
- /\Babc\B/ 匹配不是单词的abc
let str = 'hello1 world hello2 123456 ruoyu hello3'
str.match(/hello\d/g) // ["hello1", "hello2", "hello3"]
str.match(/^hello\d/g) // ["hello1"]
str.match(/hello\d$/g) // ["hello3"]
let str2 = 'hello1 whello9orld hello2 12-hello8-3456 jirengu ruoyu hello3'
str2.match(/\bhello\d\b/g) //["hello1", "hello2", "hello8", "hello3"]
//注意-也用于区分单词边
贪婪模式与非贪婪模式
默认是贪婪模式,即尽可能多的匹配。如果想使用非贪婪模式,可以再量词后加 ?即可
let str = '123456789'
let reg1 = /\d{3,5}/g
console.log( str.match(reg1) ) //['12345', '6789']
let reg2 = /\d{3,5}?/g
console.log( str.match(reg2) ) //['123', '456', '789']
4. 案例
- 判断用户输入是否为手机号
let reg = /^1\d{10}$/
reg.test(' 13189890989') //false
reg.test('a13189890989b') //false
reg.test('13189890989') // true
reg.test('1318989098910') // false
- 把与之匹配的字符串拿出来
const text = '图片的尺寸是1440x900';
const reg = /(\d+)x(\d+)/;
const match = text.match(reg);
console.log(match[1], match[2])
const text = `图片1的尺寸是1440x900, 图片2的尺寸是800x600`;
const reg = /(\d+)x(\d+)/g;
const match = text.matchAll(reg);
console.log([...match])
- 对于右侧HTML字符串,提取里面所有的a链接href里的内容
let str =
`<div>
<link rel="stylesheet"
href="http://jirengu.com/
style.css">
<a title="百度" href="https://baidu.com">百度</a><a href="http://jirengu.com" target="_blank">饥人谷
</a>
</div>`
let reg = /<a.+?href="(.+?)"/g
let arr = [...str.matchAll(reg)]
console.log(arr)
let urls = arr.map(v => v[1])
console.log(urls)