资讯专栏INFORMATION COLUMN

正则表达式:从Copy到手写

fxp / 1266人阅读

摘要:比如正则表达式为它们分别匹配的是,元字符在正则表达式中,有特殊含义的非数字字符。如果把下面的正则表达式转换成下图,会有助于我们理解正则表达式的含义。如果想要让正则表达式使用非贪婪模式匹配,在量词后面加个即可。

1. RegExp对象

JavaScript有两种方式实例化RegExp对象

字面量

构造函数

字面量
const reg = /all/;
console.log(reg);   // /all/
"This is all I have.".replace(reg, "ALL");    // This is ALL I have.
构造函数
const reg = new RegExp("all");
console.log(reg);   // /all/
"This is all I have.".replace(reg, "ALL"); // This is ALL I have.
2. 元字符

原义文本字符

元字符

原义文本字符
代表它本来含义的字符。比如正则表达式为 /abc//123/;它们分别匹配的是 abc123
元字符
在正则表达式中,有特殊含义的非数字字符。如: d w . + () 等。部分元字符的含义并不唯一,在不同的书写方式,含义可能不同。

元字符表:http://tool.oschina.net/uploads/apidocs/jquery/regexp.html

3. 工具推荐

不是所有正则表达式都像前面写的那么简单,因为正则表达式语法有些复杂,我们在写的时候多多少少也会有些错误,或者阅读别人写的正则表达式的时候也难理解。

如果把下面的正则表达式转换成下图,会有助于我们理解正则表达式的含义。

^http(|s)://[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+/$

给大家推荐一个工具 https://regexper.com

4. 量词
字符 含义
+ 出现一次或多次(至少出现一次)
? 出现零次或一次(最多出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n, m} 出现n到m次
{n,} 至少出现n次
// d表示匹配数字
// 匹配一个数字
"1234567890".replace(/d/, "a"); // a234567890
// 匹配一个或多个数字(至少匹配一个)
"1234567890".replace(/d+/, "a"); // a
"1234567890".replace(/d?/, "a"); // a234567890
"1234567890".replace(/d*/, "a"); // a
"1234567890".replace(/d{3}/, "a"); // a4567890
"1234567890".replace(/d{2,4}/, "a"); // a567890
"1234567890".replace(/d{3,}/, "a"); // a
"12".replace(/d{3,}/, "a"); // 12

使用工具 https://regexper.com/ 图解

d{2,6}

5. 贪婪模式和非贪婪模式

从上面 4. 量词 的例子中,"1234567890".replace(/d+/, "a"); 输出的是 a 而不是 a234567890"1234567890".replace(/d{2,4}/, "a"); 输出的是 a567890 而不是 a34567890

贪婪模式:正则表达式尽可能多的匹配,一直到匹配失败

非贪婪模式:正则表达式尽可能少的匹配,一旦匹配成功就不再匹配

因为默认情况下,正则表达式都是使用贪婪模式做匹配的。如果想要让正则表达式使用非贪婪模式匹配,在量词后面加个 ? 即可。

"1234567890".replace(/d{2,4}/, "a");  // a567890
"1234567890".replace(/d{2,4}?/, "a"); // a34567890

"1234567890".replace(/d+/, "a");      // a
"1234567890".replace(/d+?/, "a");     // a234567890
6. 类

正则表达式中,可以使用 [] 来构建一个类,正则表达式中的类是指符合某些特性的对象

字符类
正则表达式 [abcd] 是把 abcd 归为一类,该表达式可以匹配这类字符
"12345a6b7c8D9e".replace(/[abcd]/g, "|");   // 12345|6|7|8D9e
范围类
正则表达式提供了 [a-z] 来表示从 az 的任意字符(包含 az
"1a2b3c4q5z".replace(/[a-z]/g, "|");   // 1|2|3|4|5|
"1a2b3c4T5Z".replace(/[a-z]/g, "|");   // 1|2|3|4T5Z
"1a2b3c4T5Z".replace(/[a-zA-Z]/g, "|");   // 1|2|3|4|5|
"1a2b3c4q5z".replace(/[0-9]/g, "|");   // |a|b|c|q|z

[a-zA-Z0-9]

预定义类
字符 等价于 含义
d [0-9] 数字字符
D [^0-9] 非数字字符
w [a-zA-Z0-9_] 字母、数字、下划线(单词字符)
W [^a-zA-Z0-9_] 非字母、数字、下划线(非单词字符)
s [ x0Bf ] 空白字符
S [^ x0Bf ] 非空白字符
. [^ ] 除了换行、回车之外的任意字符
7. 边界
字符 含义
^ 以xxx开头
$ 以xxx结尾
 单词边界
B 非单词边界
"img/png/img-1.png".replace(/img/g, "image"); // image/png/image-1.png
"img/png/img-1.png".replace(/^img/g, "image"); // image/png/img-1.png

"img/png/img-1.png".replace(/png/g, "jpg"); // img/jpg/img-1.jpg
"img/png/img-1.png".replace(/png$/g, "jpg"); // img/png/img-1.jpg

"This is all I have.".replace(/is/g, "IS"); // ThIS IS all I have.
"This is all I have.".replace(/is/g, "IS"); // This IS all I have.
"This is all I have.".replace(/Bis/g, "IS"); // ThIS is all I have.

9. 分组 作用

与 | 使用

与量词使用

反向引用

与 | 使用

/http(|s):///

/http(|s):///.test("https://");   // true
/http(|s):///.test("http://");    // true
/a(b|c)d/.test("ad");               // false
/a(b|c)d/.test("abd");              // true
/a(b|c)d/.test("acd");              // true
与量词使用

如何匹配 javascript 出现两次 javascriptjavascript

/javascript{2}/.test("javascriptjavascript");    // false
/javascript{2}/.test("javascript");          // true
/(javascript){2}/.test("javascriptjavascript");  // true
反向引用

含有分组的正则表达式匹配成功时,将子表达式匹配到的内容,保存到内存中一个以数字编号的组里,可以简单的认为是对一个局部变量进行了赋值,这时就可以通过反向引用方式,引用这个局部变量的值。

很多情况下,我们可能需要将某种格式的字符串转换成另一种格式的字符串。例如:将 05/28/2018 转换成 2018-05-28;将Markdown语法的超链接 [Test](https://www.test.com/) 转换成HTML的超链接 Test

"05/28/2018".replace(/(d{2})/(d{2})/(d{4})/, "$3-$1-$2");
// => 2018-05-28
"[Test](https://www.test.com/)".replace(/[(.+)]((http(|s)://.+))/, "$1");
// => Test
忽略分组

有时候我们在写正则表达式的时候会多次使用分组,但有一些分组是不需要反向引用的,比如正则表达式 /http(|s):/// 中的分组,我们不需要进行反向引用,这时候我们应该使用 (?:) 来忽略分组

不忽略分组:

/http(|s):///

忽略分组:

/http(?:|s):///

10. 前瞻后顾

正则表达式是从头部(左)向尾部(右)开始匹配的,文本的尾部方向称为“前”,文本的头部方向称为“后”

前瞻:正则表达式在匹配到规则的时候,向前检查是否符合断言

后顾:正则表达式在匹配到规则的时候,向后检查是否符合断言

名称 正则 含义
正向前瞻 exp(?=assert) 向前检查符合断言的
负向前瞻 exp(?!assert) 向前检查不符合断言的
正向后瞻 (?<=assert)exp 向后检查符合断言的
负向后瞻 (? 向后检查不符合断言的
"ab1cde2fg".replace(/[a-z](?=d)/g, "X"); // aX1cdX2fg
"ab1cde2fg".replace(/[a-z](?!d)/g, "X"); // Xb1XXe2XX

"ab1cde2fg".replace(/(?<=d)[a-z]/g, "X"); // ab1Xde2Xg
"ab1cde2fg".replace(/(?
11. 修饰符

global: 是否全文搜索,默认 false

ignoreCase: 是否大小写敏感,默认 false

multiline: 是否多行搜索,默认 false

lastIndex: 是当前表达式匹配内容的最后一个字符的下一个位置

source: 正则表达式的文本字符

"aaaaa".replace(/a/, "A");      // Aaaaa
"aaaaa".replace(/a/g, "A");     // AAAAA

"aAQq".replace(/[a-z]/g, "X"); // XAQX
"aAQq".replace(/[a-z]/gi, "X"); // XXXX

/[a-z]/.test("AA");    // false
/[a-z]/i.test("AA");    // true

`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/g, "image");
// => image/png/img-1.png
//    img/png/img-1.png
//    img/png/img-1.png
`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/gm, "image");
// => image/png/img-1.png
//    image/png/img-1.png
//    image/png/img-1.png
const reg = /d/gim;
console.log(reg.source);    // d
12. RegExp对象中 test() 和 exec() test()
用于测试参数字符串中是否存在匹配正则表达式模式的字符串;如果存在则返回true,否则返回false
const reg = /w/;
reg.test("|"); // false
reg.test("a"); // true
reg.test("a"); // true

当使用 g 全文搜索时,test 函数会出现如下问题:

上述问题其实是正则表达式对象的 lastIndex 属性在作怪

如果正则表达式使用了全文搜索 g ,又想避免上述问题,应在执行 test 函数前先将 lastIndex0

const reg = /w/g;
reg.test("ab"); // true
reg.lastIndex = 0;
reg.test("ab"); // true
reg.lastIndex = 0;
reg.test("ab"); // true
exec()
使用正则表达式模式对字符串执行搜索,并将匹配到的结果以数组形式返回,如果没有匹配,返回null

结果数组属性

index:匹配字符的第一个字符的位置

input:被匹配的字符串

返回的数组

第一个元素是与正则表达式匹配的内容

第二个元素是与第一个子表达式相匹配的内容

第三个元素是与第二个子表达式相匹配的内容(以此类推)

现有如下字符串数组,我们使用 exec 从每个元素中提取图片的路径

const arr = [
    "[测试1](https://www.test1.com/img/img-1.png)",
    "[测试1](http://www.test1.com/img/img-1.jpg)",
    "[测试2](https://static.test2.com/image/haha/img-1.png)"
]

正则表达式:

const reg = /[.+](http(|s)://[a-zA-Z0-g_-]+(.[a-zA-Z0-9_-]+)+/((.+/)+.+.(png|jpg)))/;

const res = reg.exec(arr[2]);

上述正则表达式使用了较多的分组,我们在阅读图形的时候可能造成干扰,忽略不必要的分组。

const reg2 = /[.+](http(?:|s)://[a-zA-Z0-g_-]+(?:.[a-zA-Z0-9_-]+)+/((?:.+/)+.+.(?:png|jpg)))/;

reg2.exec(arr[2]);

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

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

相关文章

  • 正则达式Copy手写

    摘要:比如正则表达式为它们分别匹配的是,元字符在正则表达式中,有特殊含义的非数字字符。如果把下面的正则表达式转换成下图,会有助于我们理解正则表达式的含义。如果想要让正则表达式使用非贪婪模式匹配,在量词后面加个即可。 1. RegExp对象 JavaScript有两种方式实例化RegExp对象 字面量 构造函数 字面量 const reg = /all/; console.log(reg)...

    flybywind 评论0 收藏0
  • 正则达式Copy手写

    摘要:比如正则表达式为它们分别匹配的是,元字符在正则表达式中,有特殊含义的非数字字符。如果把下面的正则表达式转换成下图,会有助于我们理解正则表达式的含义。如果想要让正则表达式使用非贪婪模式匹配,在量词后面加个即可。 1. RegExp对象 JavaScript有两种方式实例化RegExp对象 字面量 构造函数 字面量 const reg = /all/; console.log(reg)...

    SmallBoyO 评论0 收藏0
  • 使用PHP辅助 快速制作一套自己的手写字体实践

    摘要:参考代码地址四制作字体模板把自己最常接触的汉字找出来之后,需要制作一套字体模板,这套字体模板的用处是让手写汉字后,顺利的找到对应的汉字,这里需要依靠第三方网站提供的一些功能。 一、背景 笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下制作字体的方法,发现技术上并不是太难,结合...

    moven_j 评论0 收藏0
  • 使用lxml代替beautifulsoup

    摘要:深入使用过的都会深深地喜欢上它虽然很流行但是深入了解后你就再也不会使用了我觉得不好用速度也慢虽然可以使用作为解析器了另外这种简直就是手工时代的操作很多人使用这几个函数其实它们使用起来不是很愉快手工操作的另一个特征是需要自己手写正则表达式正则 深入使用过lxml的都会深深地喜欢上它,虽然BeautifulSoup很流行,但是深入了解lxml后,你就再也不会使用bs了 我觉得beautif...

    Drinkey 评论0 收藏0
  • 面试题里的那些各种手写

    摘要:最近准备初级前端面试,发现有很多手写实现什么的,例如什么手写实现,。后面以这道题为引线面试官可能会追问什么是执行上下文的判断,的区别手写一个函数实现斐波那契数列首先拷一个阮神在他教程里的一个写法。 最近准备初级前端面试,发现有很多手写实现什么的,例如什么手写实现bind,promise。手写ajax,手写一些算法。翻阅了很多书籍和博客。 这里做一个总结改进,算是对我后面大概为期一个月找...

    wh469012917 评论0 收藏0

发表评论

0条评论

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