js中的正则

1. 工具

regexper.com

2. RegExp对象

js通过内置对象RegExp支持正则,有两种方法可实例化RegExp对象。

// 字面量
var reg = /\bis\b/g;
// 构造函数
var reg = new RegExp('\\bis\\b','g');

g: global全文搜索,默认只会找一个。
i: ignoreCase 忽略大小写,默认大小写敏感。
m: multipe 多行。

3. 元字符

14个特殊符号;使用原义需转义。

* + ? $ ^ . | \ ( ) { } [ ]
序号符号说明
1*任意(零,一,多)
2+一个或多个
3?零个或一个
4$表达式结尾
5^方括号里表示取反;表达式开始
6.任意字符
7|
8()分组
9{}量词
10[]类词
序号字符说明
1t水平制表符 tab
2v垂直制表符 vertical tab
3n换行符 line feed
4r回车符 return
50空字符 null
6f换页符 form feed
7cXctrl+X

4. 字符类

4.1 一般情况下正则表达式的字符和字符串的字符一一对应
ab\t

对应

abtab
4.2 给字符归类
[abc]指a,b,c之一
4.3 字符类取反
[^abc]指除了a,b,c之外的

4.4 范围类

[a-zA-Z0-9]

5. 预定义类和边界

序号字符等价类说明
1.1除了回车符和换行符之外的所有字符
2d[0-9]数字
3D2非数字
4s[tnrfv]space 空字符
5S3非空字符
6w[a-zA-Z0-9_]word 单词 数字大小写字母下划线
7W4非单词
序号字符含义
1^以XXX开始
2$以XXX结尾
3b单词边界
4B非单词边界

6. 量词

序号字符含义
1*任意(零,一,多)
2+一个或多个
3?零个或一个
4{m}m次
5{m,n}m-n次
6{m,}至少m次

7. 贪婪模式

str='12345678'.replace(/\d{3,6}/g,'$');

console.log(str);

结果:$78

默认贪婪模式,非贪婪模式是尽可能少的匹配。做法是在量词后面加?

str='12345678'.replace(/\d{3,6}?/g,'$');

console.log(str);

结果:$$78

8. 分组

byron{3}匹配n三次不是byron三次。解决就是分组。

(byron){3}

和|配合使用

byr(on|en)lich{3}

反向引用捕获组: $1 $2 ...

str='2016-12-25'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1');

结果:12/25/2016

忽略分组,在分组内加?:

(?:Byron){3}

例子:

str='byronbyronbyron'.replace(/(byron){3}/,'@$1')
"@byron"
str='byronbyronbyron'.replace(/(?:byron){3}/,'@$1')
"@$1"

9. 前瞻(可加断言)

正则表达式从文本头部向尾部开始解析,文本尾部方向,称为“前”。

前瞻就是在正则表达式匹配到规则的时候,向前检查是否符合断言,后顾/后瞻方向相反。

javaScript不支持后顾。

符合和不符合特定断言称为 肯定/正向 匹配和 否定/负向 匹配。

名称正则例子
正向前瞻exp(?=asset)/w(?=d)
负向前瞻exp(?!asset)w(?!d)
正向后顾exp(?<=asset)
负向后顾exp(?<!asset)

例子:

'a2*a3'.replace(/\w(?=\d)/g, '@')
"@2*@3"
'a2*a3'.replace(/\w(?!\d)/g, '@')
"a@*a@"

10. js对象属性

利用console.dir打印reg

var reg = /\w/;
console.dir(reg);
{
    flags: "",
    global: false, 
    ignoreCase: false,
    lastIndex: 0,
    multiline: false,
    source: "\w",
    sticky: false,
    unicode: false,
    __proto__: Object
}

11. RegExp的test和exec函数

11.1 test

text函数用于测试字符串参数中是否存在匹配正则表达式模式的字符串;如果存在则返回true,否则返回false;

var reg=/\w/;
reg.test('a');true
reg.test('a');true

var reg=/\w/g;
reg.test('a');true
reg.test('a');false

出现上面那种情况的原因是lastIndex属性;global为false时,该属性无效;global为true时,该属性会记录上一次匹配完后的位置,并且下一次查询会从该未知开始。

var reg=/\w/g;
console.log(reg.test('a'),reg.lastIndex); true 1
console.log(reg.test('a'),reg.lastIndex); false 0

所以,global为true或false对正则的匹配是两种行为。

11.2 exec

exec:使用正则表达式模式对字符串执行搜索,并将更新全局RegExp对象的属性以反映匹配结果;如果没有匹配的文本则返回null,否则返回一个结果数组。

var reg=/\w\d/; 
reg.exec('a1b2c3d4e5f6ggg');
reg.exec('a1b2c3d4e5f6ggg');
两次都返回:["a1", index: 0, input: "a1b2c3d4e5f6ggg"]
数组第一个是匹配到的结果;global为false时,只会匹配一个。
数组第二个是匹配到的结果的位置,是个对象{index:0};
数组第三个是匹配的字符串

global为true时,两次返回的结果不一样。

var reg=/\w\d/g; 
reg.exec('a1b2c3d4e5f6ggg');
reg.exec('a1b2c3d4e5f6ggg');
返回:
["a1", index: 0, input: "a1b2c3d4e5f6ggg"]
["b2", index: 2, input: "a1b2c3d4e5f6ggg"]

有分组时:

var reg=/(\w)\d/g; 
reg.exec('a1b2c3d4e5f6ggg');
reg.exec('a1b2c3d4e5f6ggg');
["a1", "a", index: 0, input: "a1b2c3d4e5f6ggg"]
["b2", "b", index: 2, input: "a1b2c3d4e5f6ggg"]
多了分组的数据。

一般是循环的写法:

var ts = 'a1b2c3d4e5f6ggg'
var reg=/(\w)\d/g; 
while(ret=reg.exec(ts)){
    console.log(ret.toString());
}

输出

a1,a
b2,b
c3,c
d4,d
e5,e
f6,f

12. 字符串的方法

12.1 str.search
string.search(str,replaceStr);
string.search(reg,replaceStr);
12.2 str.mathch
string.match(str,replaceStr);
string.match(reg,replaceStr);
12.3 str.replace
string.replace(str,replaceStr);
string.replace(reg,replaceStr);
string.replace(reg,function);

13. 例子

// 取扩展名
const str = "http://file.xxx.com/test/2017/09/19/34457aef4a9649e2af2f1d4e9c14d0d3.mp4";
const reg = new RegExp('^http:[/\\w.]*/(\\w*).mp4$');
const result = reg.exec(str);
console.log(result[1]);// 34457aef4a9649e2af2f1d4e9c14d0d3
// 替换source标签
const str = "aaa<source src='http://file.xxx.net/ueditor/jsp/upload/video/20170922/1506081788002070202.mp4' type='video/mp4'/>bbb";

const result = str.replace(/<source[\w\s=:'.\/0-9]+\/>/g,'');
console.log(result);// aaabbb

参考:慕课网js正则


  1. rn
  2. 0-9
  3. tnrfv
  4. a-zA-Z0-9_
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值