温故知新之javascript正则

Backache 发布于2019-08-20 11:30 / 2772人阅读

摘要：属性一类是修饰符相关，返回一个布尔值，表示对应的修饰符是否设置返回一个布尔值，指忽略大小写，注意仅是忽略大小写，并不忽略全半角，该属性只读。

因为没有系统的总结过正则表达式，工作中用到的也不到，主要靠百度现成的加改改不知道怎么就成功了，决心好好的学习一下正则表达式

新建正则表达式

使用字面量，以斜杠表示开始和结束

var regex = /s+/g;

使用RegExp构造函数

var regex = new RegExp("s+","g");

差别
上面两种写法是等价的，都新建了一个正则表达式对象。它们的主要区别是，第一种方法在编译时新建正则表达式，第二种方法在运行时新建正则表达式。考虑到书写的便利和直观，实际应用中，基本上都采用字面量的写法。

属性

一类是修饰符相关，返回一个布尔值，表示对应的修饰符是否设置

ignoreCase：返回一个布尔值，指忽略大小写，注意仅是忽略大小写，并不忽略全半角，该属性只读。
global：返回一个布尔值，进行全局匹配，指匹配到目标串的结尾，该属性只读。
multiline：返回一个布尔值，允许多行匹配，该属性只读。

m修饰符表示多行模式（multiline），会修改^和$的行为。默认情况下（即不加m修饰符时），^和$匹配字符串的开始处和结尾处，加上m修饰符以后，^和$还会匹配行首和行尾，即^和$会识别换行符（
）。

/world$/.test("hello world
") // false
/world$/m.test("hello world
") // true

上面的代码中，字符串结尾处有一个换行符。如果不加m修饰符，匹配不成功，因为字符串的结尾不是“world”；加上以后，$可以匹配行尾。

/^b/m.test("a
b") // true

上面代码要求匹配行首的b，如果不加m修饰符，就相当于b只能处在字符串的开始处。

另一类是与修饰符无关的属性，主要是下面两个

lastIndex：返回下一次开始搜索的位置。该属性可读写
source：返回正则表达式的字符串形式（不包括反斜杠），该属性只读

正则对象的lastIndex属性不仅可读，还可写。一旦手动设置了lastIndex的值，
就会从指定位置开始匹配。但是，这只在设置了g修饰符的情况下，才会有效。

方法

test()
正则对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串

reg.test(str)

如果正则表达式带有g修饰符，则每一次test方法都从上一次结束的位置开始向后匹配。

var r = /s+/g;
var s = "a b c";

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false

exec()
正则对象的exec方法，可以返回匹配结果。如果发现匹配，就返回一个数组，成员是每一个匹配成功的子字符串，否则返回null。
如果正则表示式包含组匹配，则返回的数组会包括多个成员。第一个成员是整个匹配成功的结果，后面的成员就是圆括号对应的匹配成功的组。也就是说，第二个成员对应第一个括号，第三个成员对应第二个括号，以此类推。整个数组的length属性等于组匹配的数量再加1
exec方法的返回数组还包含以下两个属性：

input：整个原字符串。

index：整个模式匹配成功的开始位置（从0开始计数）。

如果正则表达式加上g修饰符，则可以使用多次exec方法，下一次搜索的位置从上一次匹配成功结束的位置开始。

var r = /a(b+)a/g;

var a1 = r.exec("_abbba_aba_");
a1 // ["abbba", "bbb"]
a1.index // 1
r.lastIndex // 6

var a2 = r.exec("_abbba_aba_");
a2 // ["aba", "b"]
a2.index // 7
r.lastIndex // 10

var a3 = r.exec("_abbba_aba_");
a3 // null
a3.index // TypeError: Cannot read property "index" of null
r.lastIndex // 0

var a4 = r.exec("_abbba_aba_");
a4 // ["abbba", "bbb"]
a4.index // 1
r.lastIndex // 6

当整个字符串到达尾部，正则对象的lastIndex属性重置为0，意味着以后的匹配将从头开始

字符串对象的方法

match

字符串对象的match方法对字符串进行正则匹配，返回匹配结果。
如果正则表达式带有g修饰符，则该方法与正则对象的exec方法行为不同，会一次性返回所有匹配
成功的结果。
设置正则表达式的lastIndex属性，对match方法无效，匹配总是从字符串的第一个字符开始。

search

字符串对象的search方法，返回第一个满足条件的匹配结果在整个字符串中的位置。如果没有
任何匹配，则返回-1。
该方法会忽略g修饰符。设置lastIndex也无效，总是从第一个位置开始

replace
str.replace(search, replacement)

   搜索模式如果不加g修饰符，就替换第一个匹配成功的值，否则替换所有匹配成功的值。

"aaa".replace("a", "b") // "baa"
"aaa".replace(/a/, "b") // "baa"
"aaa".replace(/a/g, "b") // "bbb"

split

字符串对象的split方法按照正则规则分割字符串，返回一个由分割后的各个部分组成的数组。
`str.split(separator, [limit])`
该方法接受两个参数，第一个参数是分隔规则，第二个参数是返回数组的最大成员数。

贪婪匹配

需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符

var re = /^(d+)(0*)$/;
re.exec("102300"); // ["102300", "102300", ""]

由于d+采用贪婪匹配，直接把后面的0全部匹配了，结果0*只能匹配空字符串了。
必须让d+采用非贪婪匹配（也就是尽可能少匹配），才能把后面的0匹配出来，如果想将贪婪模式改为非贪婪模式，可以在量词符后面加一个问号

var re = /^(d+?)(0*)$/;
re.exec("102300"); // ["102300", "1023", "00"]

匹配规则

扩展

切分字符串

"a,b, c  d".split(/[s,]+/); // ["a", "b", "c", "d"]

利用g修饰符允许多次匹配的特点，可以用一个循环完成全部匹配

var r = /a(b+)a/g;
var s = "_abbba_aba_";

while(true) {
  var match = r.exec(s);
  if (!match) break;
  console.log(match);
}link
//["abbba", "bbb"]
//["aba", "b"]

replace的应用
replace方法的一个应用，就是消除字符串首尾两端的空格。

var a = "  aa  bb  ";

a.replace(/^s+|s+$/g, "")
//"aa  bb"

replace方法的第二个参数可以使用美元符号$，用来指代所替换的内容

"hello world".replace(/(w+)s(w+)/, "$2 $1")
// "world hello"

replace方法的第二个参数还可以是一个函数，将每一个匹配内容替换为函数返回值

参考资料

廖雪峰老师的教程
阮一峰老师的教程

GPU云服务器云服务器 javascript 正则 javascript正则温故而知新温故

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

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

js温故而知新5——学习廖雪峰的js教程

摘要：表示行的结束，表示必须以数字结束。用表示的就是要提取的分组。方法在匹配成功后，会返回一个，第一个元素是正则表达式匹配到的整个字符串，后面的字符串表示匹配成功的子串。贪婪匹配需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。对象 typeof 123; // number typeof NaN; // number typeof str; // string type...

mayaohua 2019-08-21 11:36 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
温故js系列（5）-正则表达式&常用代码

摘要：的对象表示正则表达式，而和都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。对象也提供了个使用正则表达式的方法。如正则表达式将匹配除了和所有大写字母之外的任何字符。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：正则表达式 JavaScript-正则表达式正则表达式简述正则表达式(re...

glumes 2019-08-21 14:04 评论0 收藏0
深入理解js

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

caikeal 2019-08-26 11:39 评论0 收藏0
温故知新之JS基础

摘要：访问属性是通过操作符完成的，但这要求属性名必须是一个有效的变量名小红的属性名不是一个有效的变量，就需要用括起来。闭包应用封装私有变量箭头函数箭头函数相当于匿名函数，并且简化了函数定义。数据类型 NAN NaN === NaN; // false 唯一能判断NaN的方法是通过isNaN()函数： isNaN(NaN); // true 浮点数的相等比较： 1 / 3 === (...

Dr_Noooo 2019-08-20 11:29 评论0 收藏0