Javascript正则表达式

145 阅读2分钟

为了方便前端做一些输入验证,我们需要掌握正则表达式。

一、创建正则表达式

  1. 使用正则表达式字面量,由包含在斜杠之间的模式组成
    // 验证手机号
    var phoneNumber = /^1[3-9]\d{9}$/;
    
  2. 调用RegExp对象的构造函数
    // 校验是够包含abc
    var re = new RegExp("abc");
    console.log(re); // /abc/
    

二、使用正则表达式

2.1、reg.test(字符串) 测试字符串是否匹配

一个在字符串中测试是否匹配的 RegExp 方法,它返回 true 或 false。包含即可

var reg = /\d/;
console.log(res.test("abc")); //测试abc是否包含数字,false

2.2、exec()

在字符串中查找匹配的内容,返回一个数组(包含匹配结果和分组信息),如果没有匹配则返回 null。 注意:exec默认只能返回首个匹配项,如果要找到所有的,就要设置全局修饰符g(下边有介绍),然后去循环exec,直到为null

// 加了()所以是数组
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = regex.exec("Date: 05-10-2023");
console.log(result[0]); // "05-10-2023"(完整匹配)
console.log(result[1]); // "05"(第一个分组)
console.log(result[2]); // "10"(第二个分组)
console.log(result[3]); // "2023"(第三个分组)

2.3 match()

在字符串中查找匹配的内容,返回一个数组(包含匹配结果和分组信息),如果没有匹配则返回 null。

const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = "Date: 05-10-2023".match(regex);
console.log(result[0]); // "05-10-2023"(完整匹配)
console.log(result[1]); // "05"(第一个分组)
console.log(result[2]); // "10"(第二个分组)
console.log(result[3]); // "2023"(第三个分组)

2.3、search()

在字符串中查找匹配的内容,返回匹配的起始位置索引,如果没有匹配则返回 -1。

const regex = /world/;
console.log("hello world".search(regex)); // 6
console.log("hello there".search(regex)); // -1

2.5、 replace()

在字符串中查找匹配的内容,并用指定的字符串替换。 仍然是懒惰特性,如果要全部替换,记得加g

const regex = /world/;
const result = "hello world".replace(regex, "there");
console.log(result); // "hello there"
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = "Date: 05-10-2023".replace(regex, (match, p1, p2, p3) => {
    return `${p3}/${p2}/${p1}`; // 2023/10/05
});
console.log(result); // "Date: 2023/10/05"

三、编写正则表达式

3.1、元字符

  • 匹配单个字符
元字符描述
.匹配除换行符(\n)以外的任意单个字符。
\d匹配单个任意数字字符(等价于 [0-9])。
\D匹配单个任意非数字字符(等价于 [^0-9])。
\w匹配单个任意字母、数字或下划线(等价于 [a-zA-Z0-9_])。
\W匹配单个任意非字母、数字或下划线的字符(等价于 [^a-zA-Z0-9_])。
\s匹配单个任意空白字符(包括空格、制表符、换行符等)。
\S匹配单个任意非空白字符。
[abc]匹配方括号内的任意单个字符(例如 a、b 或 c)。
[^abc]匹配不在方括号内的任意单个字符(例如非 a、b、c 的字符)。
\.\.对元字符.进行转义
  • 匹配多个字符 限制前面的单个字符或者()整体
元字符描述
*匹配前面的字符 0 次或多次。
+匹配前面的字符 1 次或多次。
?匹配前面的字符 0 次或 1 次(表示可选)。
{n}匹配前面的字符恰好 n 次。
{n,}匹配前面的字符至少 n 次。
{n,m}匹配前面的字符至少 n 次,至多 m 次。
var reg = /\d+/;

console.log(reg.test("abc")); // false
console.log(reg.test("1c")); //true
console.log(reg.test("a12c")); //true

reg = /\d?/; //限定0~1个数字 

reg = /\d{3}/; //恰好三个数字
console.log(reg.test("1234")); // true
console.log(reg.test("123")); // true
console.log(reg.test("a12"));  // false

3.2、边界符

元字符描述
^匹配字符串的开头。
$匹配字符串的结尾。
\b匹配单词边界(单词的开头或结尾)。
\B匹配非单词边界。
// 限制开头结束, 
// 测试是否包含这样一个字符串:开头是a, 中间是一位数字,结尾是c
var reg = /^a\dc$/;

console.log(reg.test("abc")); //false
console.log(reg.test("a1c")); //true
console.log(reg.test("a12c")); //false

3.3、特殊

元字符描述
(abc)将 abc 作为一个分组捕获。
(?:abc)将 abc 作为一个非捕获分组(不捕获匹配的内容)。
|逻辑或,匹配左边或右边的表达式。
\转义字符,用于匹配元字符本身(例如 . 匹配 .)。
var reg = /a|b/; //匹配a或b
var reg = /(abc|def)/; // 匹配abc或者def

3.4、 修饰符

修饰符描述
i忽略大小写匹配。
g全局匹配(匹配所有符合条件的结果,而不是仅匹配第一个)。
m多行模式,使 ^ 和 $ 匹配每行的开头和结尾。
s单行模式,使 . 匹配包括换行符在内的所有字符。
u启用 Unicode 匹配(ES6+)。
y粘性匹配,从 lastIndex 开始匹配(ES6+)。
放在//的后边
var reg = /\d{1,3}/g;

四、两大特性

懒惰:多次调用exec总是匹配第一个,通过g去解决 贪婪:尽可能多的去匹配。通过加一个问号/\d{1,4}?/,表示总是匹配最短的

五、常见示例

www.regexp.cn/Regex/Commo…

fehelper.com/fehelper/re…