前端内练基础-关于正则

前言:在常规的开发中正则或许是不须要彻底掌握,可是随着技术的深刻挖掘或者说要深刻某一个框架源码解析在或者寻找一些平常处理字符串的更好的处理方式,那么正则表达式能够说是必不可少的。下面就随着我开始从从浅到深一步一步的揭开正则表达式的神秘面纱。html

开始以前咱们须要掌握几个概念

  • 正则表达式有几种呈现方式?
  • 元字符是什么?经常使用的有哪些?
  • 经常使用的修饰符都有哪些?
  • 什么是正则的贪婪模式和非贪婪模式
  • ...

正则表达式呈现方式

咱们能够用一个例子来看一下如下两个的方式有何不一样。git

🌰 【文本中是否含有test的字段】es6

let str = 'this is test';
console.log(str.indexOf('test') !== -1) // true
console.log(str.includes('test')) // true

简写

// : 两个斜杠它的含义其实跟数组[]相似都属于简写。举几个简单字的例子看一下:github

🌰 正则:正则表达式

// 文本中是否含有test的字段
let str = 'this is test';
let res = /test/
console.log(res.test(str))  // true

构造函数

new RegExp(pattern[, flags]):构造函数的方式进行建立,应用场景不是不少,可是支持动态传参。对于一些须要动态配置规则的场景仍是颇有帮助的。数组

🌰 正则:框架

// 找出含有test的文本
let str = 'this is test';

function foo(r, s) {
    const re = new RegExp(r)
    return re.test(s)
}
let res1 = foo('test', str);  // true
let res2 = foo('test1', str); // false

元字符

  元字符就是拥有特定功能的特殊字符,大部分须要加反斜杠进行标识,以便于跟普通字符进行区分,而少数的元字符则须要加上反斜杠,以便于转义为普通字符使用。函数

常见的元字符列表

字符 描述
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\' 匹配 "\" 而 "(" 则匹配 "("。
^ 匹配输入字符串的开始位置。若是设置了 RegExp 对象的 Multiline 属性,^ 也匹配 '\n' 或 '\r' 以后的位置。
$ 匹配输入字符串的结束位置。若是设置了RegExp 对象的 Multiline 属性,$ 也匹配 '\n' 或 '\r' 以前的位置。
* 匹配前面的子表达式零次或屡次。例如,zo 能匹配 "z" 以及 "zoo"。 等价于{0,}。
+ 匹配前面的子表达式一次或屡次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。例如,"do(es)?" 能够匹配 "do" 或 "does" 。? 等价于 {0,1}。
{n} n 是一个非负整数。匹配肯定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',可是能匹配 "food" 中的两个 o。
{n,} n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的全部 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m} m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。例如,"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
. 匹配除换行符(\n、\r)以外的任何单个字符。要匹配包括 '\n' 在内的任何字符

查看更多post


说一千道一万还不如来几个例子看看元字符如何使用

🌰 栗子:this

找到字符串的特殊字符

let str = '.-&*'
let re = /[\.\-\&\*]+/
console.log(re.test(str)) // true

利用转义字符进行匹配特殊的字符好比说:\-\&\.等等跟原生的JavaScript的转义原理一致。

上图:

image.png


🌰 栗子:

判断字符串是否以数字开头字母结尾

let str = 'abc123'
let re = /^[a-z]+[0-9]+$/;
re.test(str) // true

讲解: ^是以xxx开始,&是以xxx结束,在[a-z] 表示在a-z字符中随便一个,+一次或者屡次。

上图:

image.png

🌰 栗子:

替换日期的格式

let str = '2019-10-1'
let re = /(\d+)\-(\d+)\-(\d+)/;
let result = str.replace(re, `$1年$2月$3日`); 
console.log(result) // 2019年10月1日

讲解: 利用元字符()分组的概念能够拿到匹配的分组名称,而后进行本地替换。

上图:

image.png

🌰 栗子:

匹配16进制的颜色值

let str = '#ffbbad #Fc01DF #FFF #ffE'
let regex = /#[0-9a-zA-Z]{3,6}/g;
console.log(str.match(regex));

讲解:找到16进制符的规律,使用{3,6}的形式进行匹配 最少3次,最多6次 。

上图:

image.png

以上是对元字符怎么使用有了简单的介绍,想要掌握的更加详细的话还须要多看多练多谢。下面看一下经常使用的修饰符。


经常使用的修饰符

g :全局模式,表示查找字符串的所有内容,而不是找到一个匹配的内容就结束。

🌰 栗子:

// 找出含有test的文本
let str = 'this is test test';

str.match(/test/); // 查询第一次匹配项 
str.match(/test/g);// 查找全部的匹配项 ['test','test']

关于字符串的match方法,请自行查阅。


i :不区分大小写,表示在查询匹配时忽略pattern和字符串的大小写。

🌰 栗子:

// 找出含有test的文本
let str = 'this is TEST TEST';

str.match(/test/); // null
str.match(/test/i);// 查询到第一个TEST,
str.match(/test/ig);// 全局查询不分大小写的test字符串

m :多行模式,表示在查找到一行文本末尾时会继续查找。

须要注意的是:m的多行模式会修改^$的行为,默认状况下^$匹配字符串的开始处和结尾处,加上m修饰符之后,^$还会匹配行首和行尾,即^$会识别换行符\n

PS: 都属于元字符会在以后面讲到。

  • ^ : 匹配输入字符串的开始位置。
  • $ :匹配输入字符串的结束位置。

🌰 栗子:

// 找出含有test的文本
let str = 'this is test\n'
/test$/.test(str) // false
/test$/m.test(str) // true

y :粘附模式,表示只查找从lastIndex开始及以后的字符串。

大白话解释y修饰符其实和g修饰符差相似,为何说相似呢?由于g修饰符只要剩余有位置存在就行,而y修饰符必须从剩余的第一个位置开始,这也就是粘连的含义。

🌰 栗子:

// 找出含有a的文本
let str = 'aaa_aa_a'
let r1 = /a+/g;
let r2 = /a+/y;

r1.exec(str)   // ['aaa']
r2.exec(str)   // ['aaa']

r1.exec(str) // ['aa']
r2.exec(str) // null

解释:一个使用g修饰符,另外一个使用y修饰符。这两个正则表达式各执行了两次,第一次执行的时候,二者行为相同,剩余字符串都是_aa_a。因为g修饰没有位置要求,因此第二次执行会返回结果,而y修饰符要求匹配必须从头部开始,因此返回null更多的细节


m :Unicode 模式,启用 Unicode 匹配。

大白话解释:会正确处理四个字节的 UTF-16 编码。更多的细节

🌰 栗子:

let str = '𠮷';
/^.$/.test(str) // false
/^.$/u.test(str) // true

s :dotAll 模式,表示元字符.匹配任何字符(包括\n 或\r)。

大白话解释: 其实在元字符串的.能够表明任意的字符,可是不包括\n \r终止符s修饰符就是解决这个使用的。

🌰 栗子:

let str = 'hello\nworld'
/hello.world/.test(str)    // false
/hello.world/s.test(str)   // true

正则的贪婪模式和非贪婪模式

在说贪婪模式和非贪婪模式的话 须要先掌握一下什么是量词,以下图:

image.png

其实量词属于元字符的一种,你没必要在乎这么多的新名词,可是至少你要知道它的做用灵活掌握。

举一个例子看一下什么是贪婪模式和非贪婪摸模式:

🌰 栗子:

贪婪模式

var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex)); // ["123", "1234", "12345", "12345"]

上图:

image.png

非贪婪模式

var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex)); // ["12", "12", "34", "12", "34", "12", "34", "56"]

上图:

image.png

发现什么不一样了吗?对了 就是多了一个? 只要在量词后面加上? 表示的只要知足要求了 就不在往下匹配了。非贪婪模式 又称惰性量词

image.png

具体的能够参考老姚的正则书 里面很细致的说明了正则的一些概念和方法论、建议时常读一读写一写。


最后

其实关于正则的概念有不少、我这里只是帮助你在复杂的正则世界里铺垫了一块转,入入门。以后还须要你本身去探索,有时间不妨看看我推荐的老姚的正则表达书,若是你也须要其余的书籍来夯实你的基础也能够下载我整理的书籍列表,来免费下载。

相关文章
相关标签/搜索