攻略正则，完善自身技能点

冷呆
363 阅读6分钟

学习正则前，我们先过一遍常用的正则方法 前端用到正则的方法共六种，分为两类

RegExp对象方法

exce()

返回值： 返回一个数组，存放匹配的结果。如果未找到匹配，则返回值为 null。 返回值的其他属性， index： 第一个匹配的字符在原字符串中的位置 input： 原字符串 groups： 表示当初命名时分组匹配到的分组对象 使用：表达式.exce(对象)

特点

  • 检测规则没有分组（reg不带括号），无论是否全局搜索（g），只返回一个数值
let str = 'fsetg23 ger2f3';
let reg1 = /\d+/g;
let reg2 = /\d+/;

reg1.exec(str)
reg2.exec(str)

在这里插入图片描述

  • 是全局搜索(g)，再次调用exce()，检索的位置会从上一个匹配结果的下一个字符开始
let str = 'fsetg23 ger2f3';
let reg1 = /\d+/g;

reg1.exec(str)
reg1.exec(str)
reg1.exec(str)
reg1.exec(str)
reg1.exec(str)

在这里插入图片描述 注意： 如果规则（reg）已经完成了一次模式匹配，之后去检索新的字符串时，需要手动将lastIndex重置reg.lastIndex = 0 例如：

let str = 'fsetg23 ger2f3';
let str2 = 'tg23 ger2f3';
let reg1 = /\d+/g;

reg1.exec(str)		// 匹配了一次
reg1.exec(str2)		// 如下图，第一次检索str2，结果index本应该是2，现在却是8

在这里插入图片描述

test()

返回值： 如果字符串 str 中含有与 reg 匹配的文本，则成功返回 true，否则返回 false

let str = 'affadnfa';
let reg = /m/g;
reg.test(str);   			// false

String对象方法

search()

返回值： 字符串中第一个和reg相匹配的起始位置，如果没有找到任何匹配的子串，则返回 -1。

注： 该方法对大小写敏感，要忽略请在匹配规则（reg)加上i

str.search(reg)

replace()

返回值： 一个新的字符串

let str = '我的name';
let reg = /name/;
str.replace(reg, '名字') 		// 我的名字

第二个参数是字符串时，如下的字符有特殊的含义：

第二个参数是函数时，

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
	console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]

split()

返回值： 按照匹配规则，将字符串切割，返回一个数组

let str = 'I 2you 4link 4mif';
let reg = /\d/;
str.split(reg);			// ["I ", "you ", "link ", "mif"]

注意事项： 它可以有第二个参数，表示结果数组的最大长度

var string = "html,css,javascript";
console.log( string.split(/,/, 2) );
// =>["html", "css"]

正则使用分组时，结果数组中是包含分隔符的：

var string = "html,css,javascript";
console.log( string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

match()

str.match(reg) 非全局检索模式，返回一个数组，并带有匹配的相关信息，index,input,groups，与exce()相同

全局检索模式，将所有检索符合匹配的子串放在一个数组，但没有其他属性信息

到此为止就是方法的总结使用，废话不多说，接着进入正题，开始正则的学习

匹配模式

i（忽略大小写）

g（全局检索）

m（多行）

字符组

表示只匹配一个字符 [abc]表示匹配一个字符，它可以是“a”、“b”、“c”之一。

  • \d就是[0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。
  • \D就是[^0-9]。表示除数字外的任意字符。
  • \w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。
  • \W是[^0-9a-zA-Z_]。非单词字符。
  • \s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。
  • \S是[^ \t\v\n\r\f]。 非空白符。
  • .就是[^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想想省略号...中的每个点，都可以理解成占位符，表示任何类似的东西。

量词

  • {m,} 表示至少出现m次。
  • {m} 等价于{m,m}，表示出现m次。
  • ? 等价于{0,1}，表示出现或者不出现。记忆方式：问号的意思表示，有吗？
  • +等价于{1,}，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，然后才考虑追加。
  • *等价于{0,}，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。

贪婪匹配

只要满足条件，就全部匹配获取

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

惰性匹配

量词后面加？，基本条件满足后，就不再继续匹配了

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"]

锚字符

  • ^（脱字符）匹配开头，在多行匹配中匹配行开头。
  • $（美元符号）匹配结尾，在多行匹配中匹配行结尾。
  • \b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置。
  • \B非单词边界
  • (?=p)，其中p是一个子模式，即p前面的位置。 捕获以p结尾的内容
  • (?!p)，p前面一个位置外的其他位置，捕获不以p结尾的内容
  • (?<=表达式)，表示表达式后面的位置，捕获以p开头的内容
  • (?<!表达式)，所在位置左侧不能匹配 表达式，捕获不以p开头的内容
  • (?:表达式)，并不需要捕获某个分组的内容，但是又想使用分组的特性

关于\b案例，便于理解

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result); 
// => "[#JS#] #Lesson_01#.#mp4#"

括号的作用

分组

let reg = /(\d{4})-(\d{2})-(\d{2})/;
let string = "2017-06-12";
string.match(reg)
//  ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12", groups: undefined]

提取数据

  • 用match()，exce()拿到返回值，直接取
  • RegExp.$1
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

非捕获：并不需要捕获某个分组的内容，但是又想使用分组的特性 (?:表达式) 反向引用 \1引用之前的分组 例：写一个正则匹配如下三种格式

2020-07-12 2020/07/12 2020.07.12

普通/\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/

但如果是这样2020/07-12，也是能够匹配成功的，如果想要分隔符前后一致，

/\d{4}(-|\/|\.)\d{2}\1\d{2}/

var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false

括号嵌套

var regex = /^((\d)(\d(\d)))\1\2\3\4$/; 
var string = "1231231233"; 
regex.exec(string)
//  ["1231231233", "123", "1", "23", "3", index: 0, input: "1231231233", groups: undefined]

解释：

括号匹配由外向内，这里正则看做四部分 第一部分，最外围大括号，里面包含三个\d，匹配123， 第二部分，大括号里，从左到右，第一个小括号，基于123的基础上，匹配1， 第三部分，大括号里第二个括号，包含两个\d，基于123的基础上，开头除去一个数字，匹配23， 第四部分，大括号里第二个括号，在23的基础上，匹配第二个数字，匹配3

在学习正则的过程中，我主要参考另一位大佬写的文章，在理解的基础上，简化了一些说明，补充了一点自己的理解，所以有些部分可能比较简略，大家可以去下面的链接参考大佬写的，很详细 我参考的文章

avatar
文章
阅读
粉丝