资讯专栏INFORMATION COLUMN

js中的正则

warmcheng / 1653人阅读

摘要:工具对象通过内置对象支持正则,有两种方法可实例化对象。前瞻就是在正则表达式匹配到规则的时候,向前检查是否符合断言,后顾后瞻方向相反。所以,为或对正则的匹配是两种行为。一般是循环的写法输出字符串的方法例子取扩展名替换标签参考慕课网正则

1. 工具

regexper.com

2. RegExp对象

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

// 字面量
var reg = /is/g;
// 构造函数
var reg = new RegExp("is","g");

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

3. 元字符

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

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

对应

abtab
4.2 给字符归类
[abc]指a,b,c之一
4.3 字符类取反
[^abc]指除了a,b,c之外的
4.4 范围类
[a-zA-Z0-9]
5. 预定义类和边界
序号 字符 等价类 说明
1 . 1 除了回车符和换行符之外的所有字符
2 d [0-9] 数字
3 D 2 非数字
4 s [tnrfv] space 空字符
5 S 3 非空字符
6 w [a-zA-Z0-9_] word 单词 数字大小写字母下划线
7 W 4 非单词
序号 字符 含义
1 ^ 以XXX开始
2 $ 以XXX结尾
3 b 单词边界
4 B 非单词边界
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(?

例子:

"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=/wd/; 
reg.exec("a1b2c3d4e5f6ggg");
reg.exec("a1b2c3d4e5f6ggg");
两次都返回:["a1", index: 0, input: "a1b2c3d4e5f6ggg"]
数组第一个是匹配到的结果;global为false时,只会匹配一个。
数组第二个是匹配到的结果的位置,是个对象{index:0};
数组第三个是匹配的字符串

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

var reg=/wd/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 = "aaabbb";

const result = str.replace(//g,"");
console.log(result);// aaabbb

参考:慕课网js正则

  • rn ↩

  • 0-9 ↩

  • tnrfv ↩

  • a-zA-Z0-9_ ↩

  • 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/86893.html

    相关文章

    • 正则JS中的正则

      摘要:注意本文将正则与中的正则分开讨论。正则零宽断言更多参考各种语言对于正则不同支持参考单行模式与多行模式通过设置正则表达式后的修饰符可开启对应的匹配模式单行模式和多行模式。 最近这段时间帮同学处理一些文档, 涉及到一些结构化文档的工作大部分都得使用正则表达式, 之前对于正则的认识大多来源于语言书上那几页的介绍, 自己也没有用过几次。这里将我之前感到模糊的概念作个整理。因为对JS了解多点,所...

      firim 评论0 收藏0
    • JS正则表达式一条龙讲解,从原理和语法到JS正则、ES6正则扩展,最后再到正则实践思路

      摘要:控制权和传动这两个词可能在搜一些博文或者资料的时候会遇到,这里做一个解释先控制权是指哪一个正则子表达式可能为一个普通字符元字符或元字符序列组成在匹配字符串,那么控制权就在哪。 温馨提示:文章很长很长,保持耐心,必要时可以跳着看,当然用来查也是不错的。 正则啊,就像一座灯塔,当你在字符串的海洋不知所措的时候,总能给你一点思路;正则啊,就像一台验钞机,在你不知道用户提交的钞票真假的时候,...

      Michael_Lin 评论0 收藏0
    • JS正则表达式元字符

      摘要:表示非单词字符,等效于正则教程返回完整的字符串,因为,中文算作是非单词字符。行首行尾,修饰符形式修饰符的作用是修改和在正则表达式中的作用,让它们分别表示行首和行尾。 正则 描述 正则 描述 f 匹配换页符 匹配制表符 匹配换行符 v 匹配垂直制表符 匹配回车 s 匹配单个空格,等同于[f v]; S...

      CODING 评论0 收藏0
    • JS中的正则表达式

      摘要:构造函数可以有两个字符串参数,第一个参数包含正则表达式的主体部分。只读的布尔值,说明这个正则表达式是否带有修饰符。中正则的扩展构造函数在中,只能接受字符串作为参数,允许其直接接受正则表达式作为参数。 上文传送门:初探正则表达式 正则表达式是一个描述字符模式的对象,JavaScript 的 RegExp 类表示正则表达式,String 和 RegExp 都定义了方法,后者使用正则表达式进...

      Soarkey 评论0 收藏0
    • js正则表达式学习笔记

      摘要:说来惭愧,做前端快三年对于正则表达式的应用还是很浅薄,大家都知道正则的速度基本上是最快的,但就是懒得去记那些语法和规则,这次项目中多次用到了需要匹配替换的动作,终于下定决心去研究一下了。 说来惭愧,做前端快三年对于正则表达式的应用还是很浅薄,大家都知道正则的速度基本上是最快的,但就是懒得去记那些语法和规则,这次项目中多次用到了需要匹配替换的动作,终于下定决心去研究一下了。 实例化正则对...

      Towers 评论0 收藏0
    • 正则表达式

      摘要:最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写,作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧 本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验,进行扩展延伸,同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

      yibinnn 评论0 收藏0

    发表评论

    0条评论

    warmcheng

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <