JS正则表达式实用总结

作者: hanyuntao | 来源:发表于2017-04-20 10:46 被阅读362次

    一、什么是正则表达式

    正则表达式是由一个字符序列形成的搜索模式,搜索模式可用于文本搜索和文本替换。

    二、创建正则表达式

    JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量。

    var re=new RegExp ();
    //RegExp 是JS中的类,同Array类似。然而这个创建方法没有指定表达式内容
    re=new RegExp ("a");
    //最简单的正则表达式,将匹配字母a 
    re=new RegExp ("a","i");
    //重载的构造函数,其第二个参数指定将不区分大小写
    

    其中,对于第二个参数,为可选参数,包括三种:

    • g:全文查找;
    • i:不区分大小写;
    • m:多行查找;

    然而更为常见的正则表达式创建法则是:字面量的声明方式。 即:

    var re=/a/i;
    //其作用同:re=new RegExp ("a","i"),而且更常用。
    

    三、正则表达式本身的方法

    在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。

    • test() 方法
      test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回 false
    //以下实例用于搜索字符串中的字符 "e":
    var patt = /e/;patt.test("The best things in life are free!");
    字符串中含有 "e",所以该实例输出为:
    true
    
    以上两行代码可以合并为一行:
    /e/.test("The best things in life are free!")
    
    • exec() 方法
      exec() 方法用于检索字符串中的正则表达式的匹配。
      该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null
      以下实例用于搜索字符串中的字母 e:
    /e/.exec("The best things in life are free!");
    字符串中含有 "e",所以该实例输出为:
    e
    

    比较常用的就是正则表达式的test方法了,因为大多只需要知道:某个字符串是否匹配某正则表达式,是则True,否则为False

    四、字符串对象中与正则表达式有关的方法

    在 JavaScript 中,正则表达式通常用于两个字符串方法 : search()replace()

    • search() 方法
      1. 检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
    //使用正则表达式搜索 "Runoob" 字符串,且不区分大小写:
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    //输出结果为:
    6
    
    1. 用于检索字符串中指定的子字符串。
      search方法可使用字符串作为参数。字符串参数会转换为正则表达式:
    //检索字符串中 "Runoob" 的子串:
    var str = "Visit Runoob!"; 
    var n = str.search("Runoob");
    
    • replace() 方法
      replace() 方法将接收字符串作为参数:
    var str="Visit W3CSchool!";
    var n=str.replace("W3CSchool","Runoob");
    console.log(n);
    //结果Visit Runoob!
    console.log(str);
    //结果Visit W3CSchool!
    

    五、常用语法分析

    5.1 ()、[]、{} 的区别

    先看个例子
    校验字符串是否全由8位数字组成

    function isStudentNo(str) {
        var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
        return reg.test(str);     /*进行验证*/
    }
    

    []是定义匹配的字符范围。[0-9]表示查找任何从 0 至 9 的数字。

    {} 一般用来表示匹配的长度。{8}表示位数为8位。

    () 的作用是提取匹配的字符串。表达式中有几个()就会得到几个相应的匹配字符串。比如(\s+)表示连续空格的字符串。

    5.2 ^ 和 $

    ^ 匹配一个字符串的开头,比如 (^a) 就是匹配以字母a开头的字符串

    $ 匹配一个字符串的结尾,比如 (b$) 就是匹配以字母b结尾的字符串

    ^还有另个一个作用就是取反,比如[^xyz]表示匹配的字符串不包含xyz

    需要注意的是:如果^出现在[]中一般表示取反,而出现在其他地方则是匹配字符串的开头。

    5.3 \d \s \w .

    \d 匹配一个非负整数, 等价于 [0-9]

    \s 匹配一个空白字符;

    \w 匹配一个英文字母或数字,等价于[0-9a-zA-Z]

    . 匹配除换行符以外的任意字符,等价于[^\n]

    5.4 * + ?

    *表示匹配前面元素0次或多次,比如(\s*)就是匹配0个或多个空格;

    + 表示匹配前面元素1次或多次,比如(\d+)就是匹配由至少1个整数组成的字符串;

    ?表示匹配前面元素0次或1次,相当于{0,1},比如(\w?) 就是匹配最多由1个字母或数字组成的字符串 。

    六、语法大全

    修饰符
    修饰符用于执行区分大小写和全局匹配:

    修饰符 描述
    i 执行对大小写不敏感的匹配。
    g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
    m 执行多行匹配。

    方括号
    方括号用于查找某个范围内的字符:

    表达式 描述
    [abc] 查找方括号之间的任何字符。
    [^abc] 查找任何不在方括号之间的字符。
    [0-9] 查找任何从 0 至 9 的数字。
    [a-z] 查找任何从小写 a 到小写 z 的字符。
    [A-Z] 查找任何从大写 A 到大写 Z 的字符。
    [A-z] 查找任何从大写 A 到小写 z 的字符。
    [adgk] 查找给定集合内的任何字符。
    `[^adgk ]` 查找给定集合外的任何字符。

    元字符
    元字符(Metacharacter)是拥有特殊含义的字符:

    元字符 描述
    . 查找单个字符,除了换行和行结束符。
    \w 查找单词字符。
    \W 查找非单词字符。
    \d 查找数字。
    \D 查找非数字字符。
    \s 查找空白字符。
    \S 查找非空白字符。
    \b 匹配单词边界。
    \B 匹配非单词边界。
    \0 查找 NULL 字符。
    \n 查找换行符。
    \f 查找换页符。
    \r 查找回车符。
    \t 查找制表符。
    \v 查找垂直制表符。
    \xxx 查找以八进制数 xxx 规定的字符。
    \xdd 查找以十六进制数 dd 规定的字符。
    \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

    量词

    量词 描述
    n+ 匹配任何包含至少一个 n的字符串。例如,/a+/ 匹配 candy中的 acaaaaaaandy 中所有的a
    n* 匹配任何包含零个或多个 n 的字符串。例如,/bo*/匹配 A ghost booooed 中的 booooA bird warbled 中的 b,但是不匹配 A goat grunted
    n? 匹配任何包含零个或一个 n 的字符串。例如,/e?le?/ 匹配 angel 中的 elangle 中的 le
    n{X} 匹配包含Xn的序列的字符串。例如,/a{2}/不匹配 candy, 中的 a,但是匹配 caandy, 中的两个 a,且匹配 caaandy. 中的前两个 a
    n{X,} X 是一个正整数。前面的模式 n 连续出现至少X 次时匹配。例如,/a{2,}/不匹配 candy 中的 a,但是匹配 caandycaaaaaaandy. 中所有的 a
    n{X,Y} XY 为正整数。前面的模式n 连续出现至少 X次,至多 Y次时匹配。例如,/a{1,3}/ 不匹配 cndy,匹配 candy, 中的 acaandy, 中的两个 a,匹配 caaaaaaandy 中的前面三个 a。注意,当匹配 caaaaaaandy 时,即使原始字符串拥有更多的 a,匹配项也是 aaa
    n{X,} 匹配包含至少 Xn 的序列的字符串。
    n$ 匹配任何结尾为 n的字符串。
    ^n 匹配任何开头为n的字符串。
    ?=n 匹配任何其后紧接指定字符串n 的字符串。
    ?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

    七、12个常用的js正则表达式

    1. 在input框中只能输入金额,其实就是只能输入最多有两位小数的数字
    //第一种在input输入框限制
     <input type="text" maxlength="8" class="form-control" id="amount" style="margin-right: 2px;" value="" onChange="count();" onkeyup="if (this.value==this.value2) return; if (this.value.search(/^\d*(?:\.\d{0,2})?$/)==-1) this.value=(this.value2)?this.value2:'';else this.value2=this.value;">元
    //第二种对于表单动态增加的方式,只能在js方法中验证。
     var amount=$("#amount").val();
     if (amount.search(/^\d*(?:\.\d{0,2})?$/)==-1) {
       alert("金额格式不对,最多有两位小数");
       return false;
    }
    
    1. 验证邮箱格式
    var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
     var email=$("#email").val();
     if(!reg.test(email) ){
        alert("请输入符合规范的邮箱账号!");
        return false;
       }
    
    1. 密码采用数字、字母、特殊字符且长度为8-20位
    function validatePwd(str) {
    if (/^.*?[\d]+.*$/.test(str) && /^.*?[A-Za-z]/.test(str)
    && /^.*?[~/`!@#$%^&*()_+|{}?;:><\-\]\\[\/].*$/.test(str) && /^.{8,20}$/.test(str)) {
    return true;
    }
    return false;
    }
    
    1. 验证电话号码
    /**
     * 验证电话号码
     * @param phoneValue 要验证的电话号码
     * @returns 匹配返回true 不匹配返回false
     */
    function validatePhone(phoneValue) {
     phoneValue = valueTrim(phoneValue);
     var reg = /^[1][0-9]{10}$/;
     return reg.test(phoneValue);
    }
    
    1. 判断是否是汉字
    /**
     * 判断是否是汉字
     *
     * @param charValue
     *   要验证的数据
     * @returns 匹配返回true 不匹配返回false
     */
    function isCharacter(charValue) {
     var reg = /^[\u4e00-\u9fa5]{0,}$/;
     return reg.test(charValue);
    }
    
    1. 是否为字母:true:是,false:不是
    function isChar(charValue){
     var charPattern=/^[a-zA-Z]*$/; //是否为字母
     result=charPattern.test(charValue);
     return result;
    }
    
    1. 判断是否为数字
    function isNum(numValue){
     var numPattern=/^\d*$/; //数字的正则表达式
     result=numPattern.test(numValue);
     return result;
    }
    
    1. 整数的正则表达式
    function isInt(intValue){
      var intPattern=/^0$|^[1-9]\d*$/; //整数的正则表达式
     result=intPattern.test(intValue);
      return result;
     }
    
    1. 是否为字母和数字
    function isCharNum(flagValue){
     var flagPattern=/^[a-zA-Z0-9]*$/; //是否为字母和数字
     result=flagPattern.test(flagValue);
     return result;
    }
    
    1. 检验18位身份证号码
    /**
     * 检验18位身份证号码(15位号码可以只检测生日是否正确即可,自行解决)
     *
     * @param idCardValue
     *   18位身份证号
     * @returns 匹配返回true 不匹配返回false
     */
    function idCardVildate(cid) {
    var arrExp = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];// 加权因子
    var arrValid = [ 1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2 ];// 校验码
    var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    if (reg.test(cid)) {
    var sum = 0, idx;
    for (var i = 0; i < cid.length - 1; i++) {
    // 对前17位数字与权值乘积求和
    sum += parseInt(cid.substr(i, 1), 10) * arrExp[i];
    }
    // 计算模(固定算法)
    idx = sum % 11;
    // 检验第18为是否与校验码相等
    return arrValid[idx] == cid.substr(17, 1).toUpperCase();
    } else {
    return false;
    }
    }
    
    1. 验证15位数身份证号码中的生日是否是有效生日
    function isValidityBrithBy15IdCard(idCard15) {
     var year = idCard15.substring(6, 8);
     var month = idCard15.substring(8, 10);
     var day = idCard15.substring(10, 12);
     var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
     // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
     if (temp_date.getYear() != parseFloat(year)
       || temp_date.getMonth() != parseFloat(month) - 1
       || temp_date.getDate() != parseFloat(day)) {
      return false;
     } else {
      return true;
     }
    }
    
    1. 验证18位数身份证号码中的生日是否是有效生日
    function isValidityBrithBy18IdCard(idCard18) {
     var year = idCard18.substring(6, 10);
     var month = idCard18.substring(10, 12);
     var day = idCard18.substring(12, 14);
     var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
     // 这里用getFullYear()获取年份,避免千年虫问题
     if (temp_date.getFullYear() != parseFloat(year)
       || temp_date.getMonth() != parseFloat(month) - 1
       || temp_date.getDate() != parseFloat(day)) {
      return false;
     } else {
      return true;
     }
    }
    

    参考资料:
    JS中正则表达式概述
    JS正则表达式常用总结
    12个常用的js正则表达式
    JavaScript RegExp 对象

    相关文章

      网友评论

      本文标题:JS正则表达式实用总结

      本文链接:https://www.haomeiwen.com/subject/ippkzttx.html