从今天起开启对正则表达式的学习

FreeZinG 发布于2019-08-23 13:42 / 2820人阅读

摘要：由于正则表达式采用了括号分组，所以在返回匹配结果的同时，依次返回该结果的所有分组两个分组，无输出全局匹配分组时，和返回结果不同。

原文链接

从今天开始关于webpack的讨论就告一段落了，如果遇到webpack有重大更新，我会随时更新，请对我保持持续关注。
每次遇到与表单验证和校验的相关问题都会很难避免的卡住，是时候攻克一下这个问题
从今天开始进入对javascript正则表达式的学习

前期准备

为了本地调试方便我们先安装本地服务器

npm install http-server -g

然后新建一个html文件
启动服务

http-server

必备知识点 创建正则表达式

javascript正则表达是的创建有两种方式

最常见的就这这种，首尾用两个斜线/分隔符，例如

var reg = /d/

实例化

var reg=new RegExp("d");//和上面等价
var reg=new RegExp(/d/);//等价

new RegExp("d")，使用字符串创建，一个反斜线用来转义d==>d,一个反斜线用来转义另一个反斜线即==>
当然最常用的还是用两个反斜线创建正则表达式
javascript的正则表达式是RegExp，
RegExp是javascript的内置构造函数，即存在protoytpe，可以翻看之前的js原型系列文章查看，我看看下RegExp的原型对象

console.log(RegExp.prototype)

输出

我们重点看test()和exec()这个方法

正则表达式内置方法test()

RegExp.prototype.test(String)是RegExp原型对象上的内置方法，我们可以直接使用，它返回一个布尔类型的值，是否在参数String中找到匹配项
并不是要求整个sring都由表达式匹配，如果要检测整个string有表达式匹配需要在表达式两端添加^和$,
感受一下的

console.log(/w/.test(1)); //=>true
console.log(/d/.test("1")); //=>true
console.log(/d/.test("q1"));    //=>true
console.log(/^d$/.test("q1"));//=>fase

test()中的参数为string类型，如果不是string类型，会被转正string类型

console.log(/w/.test(1));//=>true
console.log(/w/.test("1"));//=>true

正则表达式内置方法exec()

提到exec(),就不得不提match(),他们很相似

match是字符串方法，写法为：str.match(reg)
exec是正则表达式方法，写法为：reg.exec(str)

异同

match和exec在匹配成功时返回的都是数组，在没有匹配上时返回的都是null

var s = "aaa bbb ccc";
var reg = /w+/;
var rs_match = s.match(reg);
var rs_exec = reg.exec(s);
console.log("match:", rs_match);
console.log("exec:", rs_exec);

看输出：是相同的

当不使用全局匹配时，两者的匹配效果是一样的，仅返回第一次匹配成功的结果
继续看代码

var s = "aaa bbb ccc";
var reg = /w+/g;
var rs_match = s.match(reg);
var rs_exec = reg.exec(s);
console.log("match:", rs_match);
console.log("exec:", rs_exec);

看输出：是不同的

继续

var s = "aaa bbb ccc";
var reg = /w+/g; //有g
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
var rs_exec3 = reg.exec(s);
var rs_exec4 = reg.exec(s);
console.log("match1:", rs_match1);
console.log("match2:", rs_match1);
console.log("exec1:", rs_exec1);
console.log("exec2:", rs_exec2);
console.log("exec3:", rs_exec3);
console.log("exec4:", rs_exec4);

看输出

当使用全局匹配时，两者的匹配结果出现区别

全局匹配时，match会返回所有匹配上的内容；而exec仅匹配单次匹配上的内容

全局匹配且进行多次匹配时，exec会从上次匹配结束的下一位开始匹配，返回本次匹配上的内容，直至无可以匹配的内容，返回null

分组
无全局匹配分组时，match和exec返回结果相同。由于正则表达式采用了括号分组，所以在返回匹配结果的同时，依次返回该结果的所有分组：

var s = "aaa1 bbb2 ccc3";
var reg = /(w+)(d{1})/;//两个分组，无g
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
console.log("match1:",rs_match1);
console.log("match2:",rs_match1);
console.log("exec1:",rs_exec1);
console.log("exec2:",rs_exec2);

输出

　全局匹配分组时，match和exec返回结果不同。match会返回所有匹配到的结果；而exec会返回本次匹配到的结果，若表达式中出现分组，则会依次返回本次匹配的全部分组：

var s = "aaa1 bbb2 ccc3";
var reg = /(w+)(d{1})/g;
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
var rs_exec3 = reg.exec(s);
var rs_exec4 = reg.exec(s);
console.log("match1:",rs_match1);
console.log("match2:",rs_match1);
console.log("exec1:",rs_exec1);
console.log("exec2:",rs_exec2);
console.log("exec3:",rs_exec3);
console.log("exec4:",rs_exec4);

基本概念 普通字符

普通字符是正则表达式的基础，字符组，就是一组字符，标示在同一个位置可能出现的各种字符，写法是在[和]之间列出所有可能出现的字符，像[ab]、[1234]、[!@#%]都是字符组

console.log(/moshanghan/.test("moshanghan"));//=>true
console.log(/[abc]/.test("a"));//=>true
console.log(/[abc]/.test("b"));//=>true
console.log(/[0-9]/.test(0));//=>true

元字符

元字符是相对于普通字符来说的,

私有云云服务器 php邮箱的正则表达从现在起正则正则表达式正则匹配正则表达式

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

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

javascript正则表达式RegExp再次研究-replace

摘要：嵌套分组的捕获如果碰到类似我就是陌上寒的嵌套分组，捕获的顺序是什么来试试我就是陌上寒我就是陌上寒我就是陌上寒我是陌上寒陌上寒规则是以左括号出现的顺序进行捕获。 showImg(https://segmentfault.com/img/remote/1460000017169189?w=4260&h=2879); 原文链接昨天说了几个RegExp的几个实例属性 global 标示正则...

hzc 2019-08-23 13:44 评论0 收藏0
我所理解的正则表达式

摘要：关于，新手理解起来可能比较困难，尤其是一些很牛逼的预查正则表达式。非贪婪与贪婪的问题贪婪出现在这种不确定数量的匹配中，所谓的贪婪，表示正则表达式在匹配的时候，尽可能多的匹配符合条件的内容。学习了半年的正则表达式，也不能说一直学习吧，就是和它一直在打交道，如何用正则表达式解决自己的问题，并且还要考虑如何在匹配大量的文本时去优化它。慢慢的觉得正则已经成为自己的一项技能，逐渐的从一个正则表...

_Zhao 2019-08-20 12:07 评论0 收藏0
我所理解的正则表达式

摘要：关于，新手理解起来可能比较困难，尤其是一些很牛逼的预查正则表达式。非贪婪与贪婪的问题贪婪出现在这种不确定数量的匹配中，所谓的贪婪，表示正则表达式在匹配的时候，尽可能多的匹配符合条件的内容。学习了半年的正则表达式，也不能说一直学习吧，就是和它一直在打交道，如何用正则表达式解决自己的问题，并且还要考虑如何在匹配大量的文本时去优化它。慢慢的觉得正则已经成为自己的一项技能，逐渐的从一个正则表...

K_B_Z 2019-07-31 10:51 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
60分钟正则从入门到深入

摘要：正则表达式使用单个字符串来描述匹配一系列匹配某个句法规则的字符串。接下来，是在手机正则里面已经出现了。序列匹配而则匹配。分组与反向引用分组，又称为子表达式。把正则表达式拆分成小表达式。本文转载自网络。转载编辑过程中，可能有遗漏或错误，请以原文为准。原文作者：水墨寒湘原文链接：https://juejin.im/post/582dfc... 正则表达式对于我来说一直像黑暗魔法一样的存...

_ang 2019-08-26 11:34 评论0 收藏0