js正则表达式学习笔记

Towers 发布于2019-08-20 15:28 / 2811人阅读

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

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

实例化正则对象

对象字面量

/pattern/attributes

正则对象由这两部分构成pattern(匹配规则)+attributes(修饰符)

var reg = /is/

这样就成功的实例化一个正则表达式对象，接着我们去应用它

字符串的replace函数接受两个参数，第一个参数可以是字符串或者正则表达式，第二个参数是需要替换的字符串，这样我们就成功把小写的’is‘替换成了大写的’IS‘
好多同学看那一串符号又开始头晕了，别急，听我慢慢道来

我们先来拆解这个正则表达式
首先开头结尾的//是必须的，然后是两个’b‘，代表着单词的开头或结尾,也就是单词的分界处，最后中间的is是需要匹配的字符串。连起来意思就是匹配字符串中的is，并且前后必须要有分界，也就是说’isisisisis‘这里的is不能替换成’ISISISISIS‘
好了，有同学会问，为什么句子中的第二个’is‘没有被替换，为什么我们没看到所谓的那个修饰符。我们再改写一下这个正则对象

发现多了一个修饰符g，代表全局（globle）搜索，这样就可以匹配字符串中的所有的’is‘

构造函数

var reg = new RegExp(pattern,attributes)

var reg = new RegExp("is","g") === var reg = /is/g

这里需要解释下为什么同样的匹配规则却多了两个
那是因为在js语法中，需要转义，所以在这里的构造函数参数中需要把转义

修饰符

g--globe

这个在之前的例子中大家已经见识过了，就是全局搜索，默认匹配到第一个就会停止

i--ignore case

忽略大小写，默认大小写敏感

m--multiple lines

多行搜索

各种规则

元字符

正则表达式有两种基本字符类型组成--原义文本字符和元字符
原义文本字符：字母数字这种无需转义的字符
元字符：在正则表达式中有特殊含义的非字母字符

 * + ? $ ^ . |  () {} []

字符类

我们可以用元字符[]来构造简单的类
比如说：[abc]就把abc三个字母归为了一类，表达式可以匹配这一类字符

字符类取反

使用元字符^表示不属于创建的类中的字符

范围类

如果要是利用字符类匹配26个英文字母难道要一一写出来么，哈哈哈，too young too simple
使用范围类[a-z]匹配所有的26个英文字母，相加匹配条件就直接加在[]里面。
比如说[a-zA-Z0-9]匹配大小写的英文字母和0-9的数字

预定义类

看一个例子：匹配ab+数字+任意字符的字符串

在学习预定义类之前我们的写法是

ab[0-9][^/n/r]

现在我们学习了预定义类之后就可以这样

abd.

边界

这里的单词边界在最早的例子中我们已经见识过了，现在我们对比一下b和B的区别

^和$的用法

需要注意的是^和$在正则中的位置

量词

如果我们需要匹配连续出现100次数字的字符串难道要写100个吧
伟大的js语言当然不会这么傻了，这不引入了量词的概念么

这一次的例子我们结合接下来的概念一起理解

贪婪模式与非贪婪模式

这个例子中我们把0-9这九个数字先是用{3，6}来全局匹配，发现匹配出两个NB
我来解释一下，正则表达式默认是贪婪模式匹配，即在量词范围中取最大的那个来匹配，所以第一个才会出现两个NB，1-6匹配一个NB,7-9匹配一个NB。而第二个匹配范围是{3，7}，结果是NB89，因为最大值是7，所以1-7匹配成NB，而剩下的8，9达不到3个，所以没有匹配成功

这个非贪婪模式和贪婪模式相反，即取最小值来匹配，用法是在量词后面加？。
正确设置匹配模式对于处理复杂的正则是很有益处的

分组

现在有这样的需求，匹配wensnb这个字符串出现三次，是不是有的同学会说

wensnb{3}

这样当然是错啦，因为只会匹配b出现三次，这时候就需要分组的概念

()可以起到分组的效果

或

用 | 表示或，下面的例子展示或在分组中的应用

（）把nb和123分组，并且用|表示两者取其一

反向引用

利用$进行分组中的引用，分别把分组中的内容对应$1....$n

忽略引用

并不是所有的分组我们都希望引用，用?:来忽略引用

我们把上个例子中的第二个引用忽略，所以引用个数由3变成2个，因此找不到$3
原来对应$3的24现在变成了$2，而$1不变

前瞻

大家听这个名字前瞻就知道一定有一个后顾和他对应，说的没错，只不过在js语法中的正则不支持后顾，所以我们只关注前瞻就够了

我们先来定义“前”：

在正则表达式中匹配是由文本头部到尾部（左到右），所以这个“前”代表的是文本的尾部

下面来定义前瞻：

正则表达式匹配到规则时再向前检查是否符合断言或者不符合断言（也是正则）

正向和负向前瞻的区别就是匹配到正则之后是否符合断言，符合断言称为正向前瞻，不符合就是负向前瞻

下面来看一个例子

在这个正向前瞻中，匹配一个单词字符（w不仅代表单词，还代表数字下划线）并且前面的还要符合数字1-3这个断言才行，因此我们把w e n这三个字符匹配到了

正则表达式的属性和方法

属性

在文章的开始我们介绍了修饰符globle,ignoreCase,multilines
其实这个都是正则表达式的属性，并且有两个我们没有说lastIndex和source
这五个属性都是只读，不能修改

方法

RegExp.prototype.test(str) //匹配传入的字符串符不符合正则规则（true or false）

RegExp.prototype.exec(str)

混合云服务器托管座机正则表达式 js js域名正则表达式 js类型正则表达式 js网址正则表达式

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

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

js正则表达式学习笔记

摘要：分组小括号功能较多有三种功能，作用一，把单独的项组合成子表达式。作用三，允许后面引用前面的表达式。如果这时的正则表达式是一个非全局的，那么和正则表达式方法拿到的结果相同。，也可以接受一个正则表达式作为参数。正则表达式创建字面量创建，a = /abc/gim;构造函数创建，a = new RegExp(abc,gim)正则表达式中的特殊字符，[...] 方括号中的任意字符[^...] ...

superPershing 2019-08-23 12:48 评论0 收藏0
JS正则表达式学习笔记2

摘要：第二阶段该部分内容是学习正则的第二篇内容，点击第一部分查看第一部分的内容。第二阶段该部分内容是学习正则的第二篇内容，点击第一部分查看第一部分的内容。这部分学习的内容包括：分组断言匹配模式（贪婪和懒惰）分组我们可以通过量词匹配一个字符多次，但是如果我们想要匹配多个字符多次，就需要用到分组，比如下面一个例子 // 匹配字母和数字连续出现三次的字符 let str = a...

Ajian 2019-08-26 10:12 评论0 收藏0
正则表达式

摘要：本文内容共正则表达式火拼系列正则表达式回溯法原理学习正则表达式，是需要懂点儿匹配原理的。正则表达式迷你书问世了让帮你生成和解析参数字符串最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。 JS 的正则表达式正则表达式一种几乎可以在所有的程序设计语言里和所有的计算机平台上使用的文字处理工具。它可以用来查找特定的信息（搜索），也可以用来查...

bang590 2019-08-22 13:59 评论0 收藏0
JS正则表达式学习笔记1

摘要：正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。元字符一般情况下，正则表达式的一个字符对应字符串的一个字符。正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。正则表达式的学习确实不难，语法和应用也非常简单，能够快速入门，很轻松的就能写出简单的表达式来对字符串执行某些操作。网上也有标题党说一杯咖啡的时间就能学会。能学会吗？能！但要真...

wangdai 2019-08-26 10:12 评论0 收藏0