• JS正则表达式精简


    正则表达式的创建


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

    //使用RegExp对象创建
    var regObj = new RegExp("(^\s+)|(\s+$)","g"); // 双斜杠表示转移
    
    //使用直接字面量创建
    var regStr = /(^s+)|(s+$)/g;

    其中 g 表示全文匹配,与之相关的还有 i 和m,i 表示匹配时忽略大小写,m 表示多行匹配,如果多个条件同时使用时,则写成:gmi

    ()、[]、{} 的区别


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

    [] 是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示字符文本要匹配英文字符和数字。

    {} 一般用来表示匹配的长度,比如 d{3} 表示匹配三个数字,d{1,3} 表示匹配1~3个数字,d{3,} 表示匹配3个以上数字。

    注意:/d{3}/.test(1234) -> true;  这是因为当1234中的123符合正则表达式时就返回了true。 正确的写法应该是: /^d{3}$/

    ^ 和 $


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

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

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

    注意问题:

    1、如果^出现在[]中一般表示取反,而出现在其他地方则是匹配字符串的开头

    2、^和$配合可以有效匹配完整字符串: /d+/.test('4xpt') -> true, 而/^d+$/.test('4xpt')->false

    d  s  w  .


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

    s 匹配一个空白字符

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

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

    * + ?


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

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

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

    $1 和 1 


    $1-$9存放着正则表达式中最近的9个正则表达式的提取的结果,这些结果按照子匹配的出现顺序依次排列。基本语法是:RegExp.$n ,这些属性是静态的,除了replace中的第二个参数可以省略RegExp之外,其他地方使用都要加上RegExp

    复制代码
    //使用RegExp访问
    /(d+)-(d+)-(d+)/.test("2016-03-26") 
     
    RegExp.$1  // 2016
    RegExp.$2  // 03
    RegExp.$3  // 26
    
    //在replace中使用
    "2016-03-26".replace(/(d+)-(d+)-(d+)/,"$1年$2月$3日")  
    // 2016年03月26日
    复制代码

    1 表示后向引用,是指在正则表达式中,从左往右数,第1个()中的内容,以此类推,2表示第2个(),表示整个表达式。

    复制代码
    //匹配日期格式,表达式中的1代表重复(-|/|.)
    var rgx = /d{4}(-|/|.)d{1,2}1d{1,2}"/
    
    rgx.test("2016-03-26") //true  
    
    rgx.test("2016-03.26") //false 
    复制代码

     两者的区别是: 只能用在表达式中,而$n只能用在表达式之外的地方。 

    test 、match


    前面的大都是JS正则表达式的语法,而test则是用来检测字符串是否匹配某一个正则表达式,如果匹配就会返回true,反之则返回false

    /d+/.test("123") ; //true
    
    /d+/.test("abc") ; //false

    match是获取正则匹配到的结果,以数组的形式返回

    "186a619b28".match(/d+/g); // ["186","619","28"]

    replace


    replace 本身是JavaScript字符串对象的一个方法,它允许接收两个参数:

    replace([RegExp|String],[String|Function])

    第1个参数可以是一个普通的字符串或是一个正则表达式

    第2个参数可以是一个普通的字符串或是一个回调函数

    如果第1个参数是RegExp, JS会先提取RegExp匹配出的结果,然后用第2个参数逐一替换匹配出的结果

    如果第2个参数是回调函数,每匹配到一个结果就回调一次,每次回调都会传递以下参数:

    复制代码
    result: 本次匹配到的结果
    
    $1,...$9: 正则表达式中有几个(),就会传递几个参数,$1~$9分别代表本次匹配中每个()提取的结果,最多9个
    
    offset:记录本次匹配的开始位置
    
    source:接受匹配的原始字符串
    复制代码

    常见经典案例:

    1. 实现字符串的trim函数,去除字符串两边的空格

    复制代码
    String.prototype.trim = function(){
    
        //方式一:将匹配到的每一个结果都用""替换
        return this.replace(/(^s+)|(s+$)/g,function(){
            return "";
        });
    
        //方式二:和方式一的原理相同
        return this.replace(/(^s+)|(s+$)/g,'');
    };
    复制代码

    ^s+ 表示以空格开头的连续空白字符,s+$ 表示以空格结尾的连续空白字符,加上() 就是将匹配到的结果提取出来,由于是 | 的关系,因此这个表达式最多会match到两个结果集,然后执行两次替换:

    复制代码
    String.prototype.trim = function(){
        /**
         * @param rs:匹配结果
         * @param $1:第1个()提取结果
         * @param $2:第2个()提取结果
         * @param offset:匹配开始位置
         * @param source:原始字符串
         */
        this.replace(/(^s+)|(s+$)/g,function(rs,$1,$2,offset,source){
            //arguments中的每个元素对应一个参数
            console.log(arguments);
        });
    };
    
    " abcd ".trim();
    
    输出结果:
    
    [" ", " ", undefined, 0, " abcd "] //第1次匹配结果
    [" ", undefined, " ", 5, " abcd "] //第2次匹配结果
    复制代码

    2. 提取浏览器url中的参数名和参数值,生成一个key/value的对象 

    复制代码
    function getUrlParamObj(){
        var obj = {};
        //获取url的参数部分
        var params = window.location.search.substr(1);
        //[^&=]+ 表示不含&或=的连续字符,加上()就是提取对应字符串
        params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
            obj[$1] =  decodeURIComponent($2);
        });
    
        return obj;
    }
    复制代码

    /([^&=]+)=([^&=]*)/gi 每次匹配到的都是一个完整key/value,形如 xxxx=xxx, 每当匹配到一个这样的结果时就执行回调,并传递匹配到的key和value,对应到$1和$2

    3. 在字符串指定位置插入新字符串

    复制代码
    String.prototype.insetAt = function(str,offset){
    
    offset = offset + 1; //使用RegExp()构造函数创建正则表达式 var regx = new RegExp("(^.{"+offset+"})"); return this.replace(regx,"$1"+str); }; "abcd".insetAt('xyz',2); //在c字符后插入xyz >> "abcxyzd"
    复制代码

    当offset=2时,正则表达式为:(^.{3})  .表示除 之外的任意字符,{3} 表示匹配前三个连续字符,加()就会将匹配到的结果提取出来,然后通过replace将匹配到的结果替换为新的字符串,形如:结果=结果+str

    4. 将手机号12988886666转化成129****6666

    复制代码
    function telFormat(tel){
    
        tel = String(tel);
    
        //方式一
        return tel.replace(/(d{3})(d{4})(d{4})/,function (rs,$1,$2,$3){
           return $1+"****"+$3
        });
    
        //方式二
        return tel.replace(/(d{3})(d{4})(d{4})/,"$1****$3");
    }
    复制代码

    (d{3}d{4}d{4}) 可以匹配完整的手机号,并分别提取前3位、4-7位和8-11位,"$1****$3" 是将第2个匹配结果用****代替并组成新的字符串,然后替换完整的手机号。 

    5. 实现HTML编码,将< / > " & ` 等字符进行转义,避免XSS攻击 

    复制代码
    function htmlEncode(str) {
        //匹配< / > " & `
        return str.replace(/[<>"&/`]/g, function(rs) {
            switch (rs) {
                case "<":
                    return "&lt;";
                case ">":
                    return "&gt;";
                case "&":
                    return "&amp;";
                case """:
                    return "&quot;";
                case "/":  
                    return "&#x2f;"
                case "`":
                    return "&#x27;"
            }
        });
    }
    复制代码
  • 相关阅读:
    事务应用-Dao的综合应用
    JDBC的批量添加-大数据处理-结果集的元数据-Class反射-JDBC查询封装
    Java-JDBC的预编译与封装
    数据库的连接-JDBC-数据的增、删、改、查
    数据库-触发器
    PHP分片上传文件到又拍云对象存储
    【原创】PicUploader: 一个还不错的图床工具
    mac用pecl安装swoole可能出现的报错及解决办法
    Mac homebrew-1.5以后安装php扩展的方法
    重要:关于PPT转图片需要注意的问题
  • 原文地址:https://www.cnblogs.com/joke0406/p/7028746.html
Copyright © 2020-2023  润新知