前端开发中的正则表达式以及常用的正则表达式大全

深碍√TFBOYSˉ_ 2022-05-15 20:08 341阅读 0赞

**RegExp** 是正则表达式（Regular expression）的缩写，就是用一个“字符串”来描述一个特征，然后去验证另一个“字符串”是否符合这个特征。比如 表达式“ab+” 描述的特征是“一个 ‘a’ 和 任意个 ‘b’ ”，那么 ‘ab’, ‘abb’, ‘abbbbbbbbbb’ 都符合这个特征。

**正则表达式可以用来：**

*  验证字符串是否符合指定特征，比如验证是否是合法的邮件地址。
 *  用来查找字符串，从一个长的文本中查找符合指定特征的字符串，比查找固定字符串更加灵活方便。
 *  用来替换，比普通的替换更强大。

--------------------

## 创建一个正则表达式 ##

你可以使用以下两种方法之一构建一个正则表达式：

**方法一、使用一个正则表达式字面量，其由包含在斜杠之间的模式组成**，如下所示：

/* pattern/flags */
    
    const regex = /ab+c/;
    const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;

在加载脚本后，正则表达式字面值提供正则表达式的编译。当正则表达式保持不变时，使用此方法可获得更好的性能。

**方法二、调用RegExp对象的构造函数**，如下所示：

/*
        new RegExp(pattern [,flags])
    */
    let regex = new RegExp("ab+c");
    let regex = new RegExp(/^[a-zA-Z]+[0-9]*\W?_$,'gi');
    let regex = new RegExp("^[a-zA-Z]+[0-9]*\W?_$", "gi");

使用构造函数提供正则表达式的运行时编译。使用构造函数，当你知道正则表达式模式将会改变，或者你不知道模式，并从另一个来源，如用户输入。

**参数说明**

*  参数 `pattern` 是一个字符串，指定了正则表达式的模式或其他正则表达式。
 *  参数 `[, flags]` 是一个可选的字符串，包含属性 `g（global,全局搜索）`、`i （ignoreCase,不区分大小写搜索）`和 `m（multiline,多行搜索）`。
 *  ECMAScript 标准化之前，不支持 `m` 属性。如果 `pattern` 是正则表达式，而不是字符串，则必须省略该参数。

--------------------

## 正则表达式的匹配规则 ##

一个正则表达式模式是由简单的字符所构成的，比如/abc/, 或者是简单和特殊字符的组合，比如 /abc/ 或 /Chapter (\\d+).\\d/。后者用到了括号，它在正则表达式中可以被用作是一个记忆设备。这一部分正则所匹配的字符将会被记住，在后面可以被利用。正如 使用括号的子字符串匹配

**使用简单的模式**  
简单的模式是由你找到的直接匹配所构成的。比如，/abc/这个模式就匹配了在一个字符串中，仅仅字符 ‘abc’ 同时出现并按照这个顺序。在 “Hi, do you know your abc’s?” 和 “The latest airplane designs evolved from slabcraft.” 就会匹配成功。在上面的两个实例中，匹配的是子字符串 ‘abc’。在字符串 “Grab crab” 中将不会被匹配，因为它不包含任何的 ‘abc’ 子字符串。

**使用特殊字符**  
当你需要搜索一个比直接匹配需要更多条件的匹配时，比如寻找一个或多个 ‘b’，或者寻找空格，那么这时模式将要包含特殊字符。比如， 模式/abc/匹配了一个单独的 ‘a’ 后面跟了零个或者多个 ‘b’（的意思是前面一项出现了零个或者多个），且后面跟着 ‘c’ 的任何字符组合。在字符串 “cbbabbbbcdebc” 中，这个模式匹配了子字符串 “abbbbc”。

下面的表格列出了一个我们在正则表达式中可以利用的特殊字符的完整列表和描述。

表 4.1 正则表达式中的特殊字符  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]  
![这里写图片描述][70 5]  
![这里写图片描述][70 6]

--------------------

## RegExp 对象方法 ##

正则表达式可以被用于RegExp的exec和test方法以及 String的match、replace、search和split方法。

**test()**

test() 方法检索字符串中是否存在指定的值。返回值是 true 或 false。

**exec()**

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1 = new RegExp('e');
    console.log(patt1.exec('some text'));
    // OUTPUT:e
    var patt2 = new RegExp('ee');
    console.log(patt2.exec('some text'));
    // OUTPUT:null

**compile()**

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");
    document.write(patt1.test("The best things in life are free")); 
    // true
    // 改变了检索模式
    patt1.compile("eee");
    document.write(patt1.test("The best things in life are free")); 
    // false

--------------------

## 支持正则表达式的 String 对象的方法 ##

**search 检索与正则表达式相匹配的值。**

var str = "Visit W3School!"
    console.log(str.search(/W3School/))
    //OUTPUT: 6

**match 找到一个或多个正则表达式的匹配。**

var str="1 plus 2 equal 3"
    console.log(str.match(/\d+/g));
    // OUTPUT: 1,2,3

**replace 替换与正则表达式匹配的子串。**

var str = "Visit Microsoft!"
    console.log(str.replace(/Microsoft/, "W3School"));
    // OUTPUT:Visit W3School!

//找重复项最多的字符个数
    var str = 'g21ss4aeba_ersb43sgnnsssstht6sss60snnsj8resw0_ss';
    // split : 将字符串转化为数组
    // sort : 对数组排序，ASCII
    // join : 将数组转化为字符串
    var str_new = str.split('').sort().join('');
    document.write(str + '');
    document.write(str.split('') + '');
    document.write(str.split('').sort() + '');
    document.write(str.split('').sort().join('') + '');
    
    //匹配字符，且重复这个字符，重复次数至少一次。
    var regexp = /(\w)\1+/g;
    var index = 0;
    var value = '';
    str_new.replace(regexp,function($0,$1){
        // document.write($0);
        // document.write($1);
        if (index < $0.length) {
            index = $0.length;
            value = $1;
         }
    });
    document.write('重复项最多的字符是：' + value + '，个数是：' + index);
    // OUTPUT:
    // 0012344668__aabbeeegghjnnnnrrssssssssssssssssttw
    // 重复项最多的字符是：s，个数是：16

**split 把字符串分割为字符串数组。**

var str = "How are you doding today?"
    document.write(str.split(/\s+/));
    //OUTPUT: How,are,you,doing,today?

--------------------

## 常用正则表达式收集 ##

**1.用户名正则**

//用户名正则，4-16位（字母、数字、下划线、减号）
    var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
    //输出：true
    console.log(uPattern.test("caibaojian"));

**2.密码强度校验**

//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
    var pPattern = /^.*(?=.{
       6,})(?=.*\d)(?=.*[A-Z])(?=.*[!@#$%^&*? ]).&/;
    //输出 true
    console.log("==" + pPattern.test("vaibaojian#"));

**3.整数正则**

//正整数正则
    var psoPattern= /^\d+$/;
    //负整数正则
    var negPattern = /^-\d+$/;
    //整数正则
    var intPattern = /^-?\d+$/;
    //输出 true
    console.log(posPattern.test("42"));
    //输出 true
    console.log(negPattern.test("-42"));
    //输出 true
    console.log(intPattern.test("-42"));

**4.数字正则**  
可以是浮点数也可是整数

//正数
    var posPattern = /^\d*\.?\d+$/;
    //负数正则
    var negPattern = /^-\d*\.?\d+$/;
    //数字正则
    var numPattern = /^-?\d*\.?\d+$/;

**5.Email正则**

var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; //输出 true console.log(ePattern.test("99154507@qq.com"));

**6.手机号码正则**

var mPattren = /^1[34578]\d{9}$/;
    //输出 true
    console.log(mPattern.test("15507621888"));

**7.身份号正则**

//身份证号码（18为）正则
    var cp = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

**8.URL正则**

var urlP=/^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.{ 2,6}])([\/\w \.-]*)*\/?&/;
    //输出 true
    console.log(urlP.test("http://caibaojian.com"));

**9.IPv4地址正则**

//ipv4地址正则
    var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    //输出 true
    console.log(ipP.test("115.28.47.26"));

**10.十六进制颜色正则**

//RGB Hex颜色正则
    var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
    //输出 true
    console.log(cPattern.test("#b8b8b8"));

**11.日期正则**

//日期正则，简单判定,未做月份及日期的判定
    var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
    //输出 true
    console.log(dP1.test("2017-05-11"));
    //输出 true
    console.log(dP1.test("2017-15-11"));
    //日期正则，复杂判定
    var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
    //输出 true
    console.log(dP2.test("2017-02-11"));
    //输出 false
    console.log(dP2.test("2017-15-11"));
    //输出 false
    console.log(dP2.test("2017-02-29"));

**12.QQ号码正则**

//QQ号正则，5至11位
    var qqPattern = /^[1-9][0-9]{4,10}$/;
    //输出 true
    console.log(qqPattern.test("65974040"));

**13.微信号正则**

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
    var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
    //输出 true
    console.log(wxPattern.test("caibaojian_com"));

**14.车牌号正则**

//车牌号正则
    var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{
       1}[A-Z]{
       1}[A-Z0-9]{
       4}[A-Z0-9挂学警港澳]{
       1}$/;
    //输出 true
    console.log(cPattern.test("浙AKP053"));

**15.包含中文正则**

//包含中文正则
    var cnPattern = /[\u4E00-\u9FA5]/;
    //输出 true
    console.log(cnPattern.test("愚人码头"));

--------------------

![这里写图片描述][70 7]  
![这里写图片描述][70 8]  
![这里写图片描述][70 9]  
![这里写图片描述][70 10]  
![这里写图片描述][70 11]

[70]: /images/20220516/1c110e0538024fbf9d16a1c97694a3f4.png
[70 1]: /images/20220516/abeb22d9492441a8a1c9044e0cd681f8.png
[70 2]: /images/20220516/e8acdbd4cfb447c39fc801ffd45f4d6b.png
[70 3]: /images/20220516/6a2a313cef594e8cbcf7686c88015158.png
[70 4]: /images/20220516/5ca6bdfb95d6426dab69242f0ac8d71c.png
[70 5]: /images/20220516/047d1cf9e9454cacac832beecc59cb73.png
[70 6]: /images/20220516/06cdffa0e2494ab883187343f2ce9828.png
[70 7]: /images/20220516/c12e4e1a7252422fa0eef064d92df180.png
[70 8]: /images/20220516/287d043bb15b4f9392843bfaa2dd5075.png
[70 9]: /images/20220516/ed43261d24b54af1987aba62242867b1.png
[70 10]: /images/20220516/add51f8f624945f4b19fc373f4d9e05c.png
[70 11]: /images/20220516/72961eebba0b4f43b91237ba45976df4.png