JavaScript面向对象基础 - 正则表达式

正则表达式的概念

• 正则表达式是为了解决字符串操作中一些比较麻烦的场景，比如字符串提取、字符串替换、字符串验证等

  • 常用于：表单验证：是否是一个数字、是一个电话号码、是一个邮箱。。。
  • 字符串替换：
  • 字符串查找

• 正则表达式其实也是javascript里面的一个对象

  • test()方法
    • 它通过模式来搜索字符串，然后根据结果返回 true 或 false。
  • exec()方法
    • 它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
    • 如果未找到匹配，则返回 null。

    var reg = new RegExp();
    console.log(reg);
    // /(?:)/

    var reg = new RegExp();
    reg = /[1][3][7][\d]{8}/;
    var res = reg.test(13770795672);
    console.log(res);       
    // ture
    var res = reg.exec(13770795672);
    console.log(res);
    // 返回结果如下
    res = {
        0: "137707956",
        groups: undefined,
        index: 0,
        input: "13770795672",
        length: 1,
    }

正则表达式的应用

• 创建正则表达式

  • var reg = new RegExp('a');
  • var reg = /a/;

• 在字符串方法 search() 中使用正则表达式，查找

  • 使用正则表达式执行搜索字符串中 "world" 的大小写不敏感的搜索：

    var str = 'Hello world!';
    var res = str.search(/world/);
    console.log(res);
    // 返回位置 6

• 在字符串方法 replace() 中使用正则表达式，替换
  • 大小写敏感

    var str = 'Hello world!';
    var res = str.replace(/Hello world!/, '你好，世界！');
    console.log(res);

• 在字符串方法 match() 中使用正则表达式，匹配
  • 字符串方法 match() 与正则表达式方法 exec() 结果一致

    var str = 'Hello world!';
    var res = str.match(/Hello world!/);
    console.log(res);
    // 返回结果如下
    res = {
        0: "world",
        groups: undefined,
        index: 6,
        input: "Hello world!",
        length: 1,
    }

    var str = /Hello world!/;
    var res = str.exec('Hello world!');
    console.log(res);
    // 返回结果如下
    res = {
        0: "world",
        groups: undefined,
        index: 6,
        input: "Hello world!",
        length: 1,
    }

正则表达式特殊字符

字符类别

• .
  • 表示除了换行符(\r \n)以外的任意字符
  • 如果要匹配.字符，/qq\.com/ 或者 /qq[.]com/

    var reg=/./;
    reg.test("a");      //true
    reg.test(".");      //true
    reg.test("\r");     //false
    reg.test("1\r");    //存在一个1，不是换行符，所以结果为：true
    reg.test("\r\n");   //false

• \d
  • 表示数字

    var reg=/\d/;
    reg.test("123abc"); //由于存在一个数字，所以结果为true
    reg.test("abcde");  //由于不存在任何数字，所以结果为false

    //扩展：
    var _reg=/\d\d/;
    _reg.test("1b");    //不存在2个连续数字，所以结果为：false
    _reg.test("a12c");  //存在2个连续数字，结果为：true

    //匹配手机号码：出现了连续11个数字
    var isCellphoneNumber=/\d\d\d\d\d\d\d\d\d\d\d/;

• \D
  • 表示\d的取反结果，表示不是数字

    var reg=/\D/;
    _reg.test("123");   //由于全是数字，所以结果为：false
    _reg.test("123a");  //存在一个字母，所以结果为：true

    var reg2=/123\D5/;
    _reg.test("12345"); //false
    _reg.test("123b5"); //true

• \w
  • 匹配字母、数字、下划线 ，三者满足其一即可

    var reg=/\w/;   
    reg.test("123");    //存在数字，结果为：true
    reg.test("a");      //true
    reg.test("1");      //true
    reg.test("_");      //true
    reg.test("-");      //false
    reg.test(".");      //false

    reg.test("1.");     //true
    reg.test("_\r\n");  //true
    reg.test("\r\n");   //false

• \W
  • 表示\w的取反，非字母、数字、下划线

    var reg = /\W/;
    reg.test('=');      // true
    reg.test('5');      // false

• \s
  • 表示一个空白字符（例如：\r \n \t 空格 。。。）

    var reg=/\s/;
    reg.test("abc def");    //存在一个空白，结果为：true
    reg.test("abc\r123");   //存在一个\r，结果为：true
    reg.test("abc");        //false

• \S
  • 是\s的取，非空白字符

    var reg=/\S/;
    reg.test(" \r \n ");   //全是空白字符，结果为false
    reg.test("123 abc");    //存在一个空白，结果为true


    var reg3=/\s\S/;
    reg3.test(" a");    //true
    reg3.test("a ");    //false
    reg3.test("a b");   //true

• \
  • 表示转义字符

    var reg=/./;    //匹配除了换行符以外的任意字符
    var reg=/\./;   //匹配.字符

    var reg=/\//;   //匹配一个正斜杠：/
    var reg=/[/]/;  //。。。。。。。。。

字符集合

• []
  • 用于查找一定范围的字符串：

    var reg=/[1a2b3]/; //匹配这5个字符中的其中一个，只要满足其中，就是符合要求的
    reg.test("a");      //结果为：true
    reg.test("3");      //结果为：true
    reg.test("fg5678"); //一个符合要求的字符都不存在，结果为：false
    reg.test("a999999");    //结果为：true

    var reg2=/[123][abc]/;
    reg2.test("2a");    //true
    reg2.test("3c");    //true
    reg2.test("asdfasdf1c");    //存在符合条件的1c，结果为：true
    reg2.test("39");    //不满足

    var reg2=/[0-9]/;   //匹配数字0-9之间，任何一个数字 等价于：/\d/
    var reg3=/[a-z]/;   //匹配小写字母
    var reg4=/[A-Z]/;   //匹配大写字母
    var reg5=/[a-zA-Z]/;//匹配所有字母
    var reg6=/[A-Za-z]/;//..........

    var reg10=/[0-9abc]/;
    reg10.test("3");//true
    reg10.test("five");//false
    reg10.test("banana");//true

• [^]
  • 用于查找范围以外的字符串

    var reg=/[^123]/;   //不是1 并且 不是2 并且 不是3 
    reg.test("a");      //true
    reg.test("3");      //false
    reg.test("123");    //没有1，2，3以外的字符，结果为：false

字符边界

• ^ 表示匹配开始字符串

    var reg=/^abc/;         //表示以abc开头
    reg.test("123abc123");  //并不是以abc开头，结果为：false
    reg.test("abc123");     //以abc开头，结果为：true

• $ 表示匹配结尾字符串

    var reg=/abc$/;         //表示以abc结尾
    reg.test("123abc");     //结果为：true
    reg.test("abc123");     //结果为：false

    var reg=/^abc$/;    //表示字符串abc
    reg.test("abc");    //结果为：true
    reg.test("123abc"); //结果为：false

修饰符

• i

  • 执行对大小写不敏感的匹配。

• g

  • 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

• m

  • 执行多行匹配。

字符量词

• *
  • 出现0次或多次

    var reg=/\d*/;
    reg.test("123");    //true
    reg.test("234");    

    var reg3=/1\d*/;
    reg3.test("123");   //true
    reg3.test("a123")   //true
    reg3.test("a1b");   //false

• +

  • 出现1次或多次

• ?

  • 出现0次或一次

• {3}

  • 出现3次

• {3,}

  • 至少出现3次

• {3,5}

  • 出现3-5次

    var reg=/abc{3}/;           //表示匹配abccc
    reg.test("123abccc123");    //结果为：true

• |
  • 或者

    var reg=/abc|123/;  //表示匹配abc或者123

• ()
  • 分组

    var reg=/(\d{3-4})-(\d{7,8})/;
    var arr="021-33335555".match(/(\d{3,4})-(\d{7,8})/)
    arr[0]  //全部
    arr[1]  //区号：021
    arr[2]  //号码：333355555
    // 返回值
    arr = {
        0: "021-33335555",
        1: "021",
        2: "33335555",
        groups: undefined,
        index: 0,
        input: "021-33335555",
        length: 3,
    }

    var reg = /(\d{3-4})-(\d{7,8})/;
    var res = "021-33335555".replace(/(\d{3,4})-(\d{7,8})/,'区号是：$1');
    console.log(res);

    //怎么用正则截取data-前面所有的字符？
    var str = "sjhsf hj-123data-sgfas123ga";
    var s1=str.replace(/data-[a-z0-9]+/,"");
    console.log(s1);

    //type方法
    var type = Object.prototype.toString.call('1');
    console.log(type);
    //[object Xxxx]
    //type.replace(/\[object /,"").replace(/\]/,"").toLowerCase();
    var type2 = type.replace(/\[object |\]/g,"").toLowerCase();
    console.log(type2);

常用正则表达式

• 表单验证

    //用户名正则，4到16位（字母，数字，下划线，减号）
    var reg = /^[a-zA-Z0-9_-]{4,16}$/;

    //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
    var reg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

    // 邮箱正则
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

     // 手机号码正则
    var reg = /^[1][3][0-9]{9}$/;   

    // 身份证号正则
    var reg = /^[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]$/;

    // URL正则
    var reg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

    // IPv4地址正则
    var reg = /^(?:(?: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]?)$/;

    // 十六进制颜色正则
    var reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;

    // 日期正则
    var reg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;

    // 日期正则，复杂判定
    var reg = /^(?:(?!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)$/;

    // QQ号码正则
    var reg = /^[1-9][0-9]{4,10}$/;

    // 微信号正则
    var reg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

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

    // 包含中文正则
    var reg = /[\u4E00-\u9FA5]/;