乐趣区

关于前端:JS正则总结

 前言

正则表达式(Regular Expression)字面意思是具备肯定规定的表达式,通常被用来检索、替换那些合乎某个规定的文本。

<<<<<<< HEAD

本人刚接触正则的时候也是一脸懵逼的,看各种正则表达式也是看的一头雾水的 … 所以没有去深挖,工作中用到正则才去百度 -.-

 集体总结,正则无非就匹配两种类型:

本人刚接触正则的时候也是一脸懵逼的,看各种正则表达式也是看的一头雾水的 … 所以没有去深挖,工作中用到正则才去百度~.~。

集体总结,正则匹配无非就两个:

3a744fc14da2d14b6c55a1be99d2c5e67da3ea1f

  • 匹配字符
  • 匹配地位(能够了解为限定条件)

还是举个例子吧,比方一个简略的匹配,匹配一个数字:

  1. 匹配字符

/d+/gm

匹配了多个数字,其中 d 代表匹配数字,+ 示意至多匹配 一次(贪心)

  1. 匹配地位

/^d+/gm

这次咱们先匹配了一个 ^(结尾),前面又匹配了多个数字

其实咱们能够这样了解,限定了数字必须紧跟着结尾,能够改写为


/(?<=^)d+/gm

?<=^ 示意匹配 ^ 前面的地位

本人初学正则的时候看到一堆字符也是一头雾水的,安利两个有助于学习的网站:

  • Regular Expressions 101

    十分好用,强烈推荐

  • Regulex

    图形化,十分有助于拆解、了解简单的正则

上面开始进入正题~.~


<<<<<<< HEAD

 正则根底

=======

 正则总结

3a744fc14da2d14b6c55a1be99d2c5e67da3ea1f

 申明

  1. 字面量创立形式

let reg = /pattern/attributes;
  1. 实例创立形式

let reg = new RegExp(pattern, attributes)

 RegExp 对象办法

  1. exec()

exec() 办法用于检索字符串中的正则表达式的匹配。返回一个数组,其中寄存匹配的后果。如果未找到匹配,则返回 null


/hello/.exec('hello world');

// ["hello", index: 0, input: "hello world", groups: undefined]
  1. test()

test() 办法用于检测一个字符串是否匹配某个模式。返回值 true 或 false


/hello/.test('hello world'); // true

 修饰符

| 修饰符 |          形容          |

| :—-: | :——————–: |

|   g    |  global(执行全局匹配)  |

|   i    | IgnoreCase(疏忽大小写) |

|   m    |  Multiline(多行模式)   |

 元字符

罕用的领有非凡含意的字符:

| 元字符 |                                形容                                |

| —— | :—————————————————————-: |

| .      | 通配符,换行符、回车符、行分隔符和段分隔符除外 1 |

|       |                              转义字符                              |

| |     |                                或者                                |

| ()     |                                分组                                |

| ^      |                    限定开始地位 => 自身不占地位                    |

| $     |                    限定完结地位 => 自身不占地位                    |

| w     |                     匹配单词字符 [0-9a-zA-Z_] |

| W     |                        除了 w 2 |

| d     |                           匹配数字 [0-9] |

| D     |                           除了 d 3 |

| s     |                     查找空白字符 [tvnrf] |

| S     |                        除了 s 4 |

| b     |                            匹配单词边界                            |

| B     |                               除了 b                               |

| 0     |                           查找 NUL 字符                            |

| n     |                             匹配换行符                             |

| f     |                             查找换页符                             |

| r     |                             查找回车符                             |

| t     |                             查找制表符                             |

| v     |                           查找垂直制表符                           |

 量词

| 量词  |         形容         |

| —– | :——————: |

| * |       0 到多个       |

| +     |       1 到多个       |

| ?     | 0 次或 1 次 可有可无 |

| {n}   |         n 次         |

| {n,}  |       n 到屡次       |

| {n,m} |     n 次到 m 次      |

 锚点

<<<<<<< HEAD

| 修饰符 | 形容 |

=======

| | 形容 |

3a744fc14da2d14b6c55a1be99d2c5e67da3ea1f

| ————– | :————————————: |

| ^ | 结尾 |

| $ | 结尾 |

| b | 单词边界 |

| B | 非单词边界 |

| (?=p)、(?<=p) | p 后面(地位)、p 前面(地位) |

| {?!p}、(?<!p>) | 除了 p 后面(地位)、除了 p 前面面(地位) |


 字符匹配总结

 1 含糊匹配

 1.1 横向含糊匹配

一个正则可匹配的字符串的长度不是固定的,能够是多种状况的。


let reg = /ab{2,5}c/g;

let str = 'abc abbc abbbc abbbbc abbbbbc abbbbbbc';

console.log(str.match(reg)); // ["abbc", "abbbc", "abbbbc", "abbbbbc"]

 1.2 纵向含糊匹配

一个正则匹配的字符串,具体到某一位字符时,它能够不是某个确定的字符,能够有多种可能。


let reg = /a[123]b/g;

let str = 'a0b a1b a2b a3b a4b';

console.log(str.match(reg)); // ['a1b', 'a2b', 'a3b']

 2 贪心匹配和惰性匹配

 2.1 贪心匹配

贪心匹配是尽可能多的匹配


let str = "123456789";

let reg = /d{2,5}/g;

console.log(str.match(reg));

// ["12345", "6789"] 每次都是最大化的 5 次

 2.2 非贪心匹配

非贪心匹配是在满足匹配的状况下,尽可能少的匹配。在量词前面加个 ’?’


let str = "123456789";

let reg = /d{2,5}?/g;

console.log(str.match(reg));

// ["12", "34", "56", "78"] 每次都是最小化的 2 次,匹配到 9 时不满足匹配条件

 3 多表白分支

只有其中某个子表达式可能匹配,整个多选构造的匹配就胜利;如果所有子表达式都不能匹配,则整个多选构造匹配失败。


let str = "helloworld";

let reg1 = /hello|helloworld/g;

let reg2 = /helloworld|hello/g;

console.log(str.match(reg1)); // ["hello"]

console.log(str.match(reg2)); // ["helloworld"]

相似于 js 中的 |,会短路后面匹配上了(为 true), 前面的就不论了


 地位匹配总结

 1 地位特型

地位, 能够了解成空字符 ”;

例如,咱们能够拆解字符串:


"hello" === ""+"h"+"" + "e" + ""+"l"+"" + "l" + "o" + "";"hello"==="" + ""+"hello"

所以对于 /^hello$$/ 其实等价于 /^^^^^^hello$$$$$$/

 2 锚点符

|                |                  形容                  |

| ————– | :————————————: |

| ^              |                  结尾                  |

| $             |                  结尾                  |

| b             |                单词边界                |

| B             |               非单词边界               |

| (?=p)、(?<=p)  |       p 后面(地位)、p 前面(地位)       |

| {?!p}、(?<!p>) | 除了 p 后面(地位)、除了 p 前面面(地位) |

锚点能够了解为限度条件,咱们还是举个例子吧,假如有一个字符串 ‘hello , i love you’

  1. 匹配 ‘hello’

so easy, 信手拈来


/hello/gm

  1. 匹配 ‘hello’ 中的 ’e’

emmm….. 这个 ……,如果 用 /e/gm, 那么 ‘love’ 中的 ’e’ 也会被匹配进去,这个时候咱们的锚点符就派上用场了。

咱们能够限度必须是 ‘hello’ 中的 ’e’:


/(?<=h)e(?=l)/gm

下面的正则翻译为人话就是 在 ’h’ 和 ’l’ 之间的地位,匹配一个 ’e’,留神锚点符只是启了限度作用,并不匹配 ‘h’、’l’

 3 经典案例

 3.1 url 参数截取

简略,懂了地位匹配(可了解为限定条件),再也不必老掉牙的字符串切割了哈哈哈哈~.~


function get_query_param(param_name) {const reg = new RegExp(`(?<=${param_name}=)[^&]*`, 'g');

 const result = window.location.search.substr(1).match(reg);

 return result ? result[0] : '';

}

 3.2 正整数或一位小数

要求写一个正则,校验数字是否为正整数或者一位小数。

这对我来说不是很简略,不就是校验正整数 + 小数校验吗:

  • 正整数局部 ([1-9]d*|0)
  • 小数局部 (.d{1})?

/^([1-9]d*|0)(.d{1})?$/g

这段正则看起来很完满,可是却疏忽了一些,因为不思考小整数状况下,零是不可能存在在整数位上的,但如果反对小数的话,就会呈现一些问题,如 0 0.0 等

所以咱们还得对结尾做一些限度,限度一些非凡状况,限度结尾能够用 (?!^),残缺代码如下:


function check_is_positive_integer_one(check_num) {const reg = /^(?!0+(.0+)?$)([1-9]d*|0)(.d{1})?$/g;

 return reg.test(check_num);

}


 括号总结

 1 分组

和数学上一样,计算机的括号能够用来分组隔离,括号内的被当成一个整体


let regex = /^I love (guagndong|xizang)$/;

console.log(regex.test("I love guagndong") ); // true

console.log(regex.test("I love xizang") ); // true

 2 援用分组

yyyy-mm-dd => mm/dd/yyyy


let reg = /(d{4})-(d{2})-(d{2})/;

let str = '2020-06-02';

str.replace(reg, '$2/$3/$1'); // "06/02/2020"

 3 反向援用

匹配如下三种日期格局:


2020-06-02

2020/06/02

2020.06.02

可应用 1、2……3 来援用前一个 () 雷同的匹配,即 1 代表援用第一个括号的匹配,顺次类推:

  • 括号嵌套,以左括号为准顺次数 1,2,…
  • 括号分组若超过 10,则 10 代表匹配 1 和 0
  • 援用不存的分组,则 1 代表匹配本义后的 ’1′

let reg = /d{4}(-|/|.)d{2}1d{2}/;

reg.test('2020-06-02'); // true

reg.test('2020/06/02'); // true

reg.test('2020.06.02'); // true

reg.test('2020-06/02'); // false

 4 非捕捉分组 (?:p)

如果只想要括号最原始的性能,但不会援用它,即,既不在 API 里援用,也不在正则里反向援用。此时能够应用非捕捉分组(?:p)


let reg = /(?:ab)+/g;

let str = 'ababab aba ab';

str.match(reg);

// ["ababab", "ab", "ab"]

纯手码,如有有余或问题,欢送指出

原文链接:JS 正则总结


END


  1. nru2028u2029 ↩
  2. 0-9a-za-z_ ↩
  3. 0-9 ↩
  4. tvnrf ↩
退出移动版