zoukankan      html  css  js  c++  java
  • JavaScript基础10——正则

    什么是正则?
        正则表达式(regular expression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个字符,将匹配的字符做替换或者从某个字符串中取出某个条件的子串等。
        
        正则表达式:
        正则表达式其实就是一种规则,其实把正则称作规则表达式更为恰当。正则的语法基于一种古老的perl语言。

    为什么使用正则表达式?

    我们学习正则表达式的原因非常简单,目的就是能够帮助我们快速的匹配字符串。

    我们可以通过下面的代码来简单的体会一下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用正则表达式的理由</title>
    </head>
    <body>
        
    </body>
    <script>
        // 例如我们现在有这样一个需求,将一个字符串当中的数字拿出
        var str = "12 ,90,abc,admin-root30369,.....";
        
        // 创建一个空的数组
        var arr = [];
        var tmp = '';
        
        // 开启循环处理数据
        for(var i=0;i<str.length;i++){
            // 判断字符串中的内容是否为数字
            if(str.charAt(i) >= '0' && str.charAt(i) <= '9'){
                tmp += str.charAt(i);
            }else{
                if(tmp){
                    arr.push(tmp);
                    tmp = '';
                }
            }
        }
        
        // 打印
        console.log(arr);
    </script>
    </html>

     在看看正则的方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>通过正则取出字符串当中的数字</title>
    </head>
    <body>
        
    </body>
    <script>
        
        var str = "12 ,90,abc,admin-root30369,.....";
        var n = /d+/g;
        console.log(str.match(n));
        
        
        
    </script>
    </html>

    emmmmmmmmmmmmmmmm,所以你说用谁嘛

    如何创建一个正则表达式

    <script>
        // 定义一个正则表达式的三种方式:
        var re1 = /abc/; // 定义正则最简单的方式,通过直接量的形式直接创建. 两个斜杠当中就是正则的内容.
        
        var re2 = new RegExp(/abc/); // 定义正则的第二种形式,也可以变化成下面的写法
        var re2_two = new RegExp("abc"); // 等同于上面的写法
        
        var re3 = RegExp("hello"); // 使用的是转换函数创建的正则
        
        
    </script>

     在上面的代码中,我们通过三种形式分别创建了正则表达式,无论是从哪个方面来说,都推荐使用第一种写法。

    字符串.replace(oldstr, newstr)函数 和 字符串.match(正则)函数

        字符串的replace函数的功能:将老字符串替换成新字符串
     
        可以利用此函数,将老字符串表示成正则表达式,对字符串进行替换
     
        如:字符串中的abc替换成“哈哈”,如果正则后面没有g,则只替换一个,如果没有i,则大写不会替换
        var str = “abc123abc456abbcdABCefaacbcdbcabc";
        var reg = /abc/g;
        console.log(str.replace(reg,"哈哈"));
     
     
        字符串match函数的功能:提取所有的想要的东西
        返回一个数组,包含所有符合条件的字符
     
     
        d    匹配所有的数字
     
        var reg = /d/g;
        console.log(str.match(reg))    //打印字符串中所有的数字
     
        +     若干,量词,表示多少个都可以,至少1个,无上限
     
        var reg = /d+/g;
        console.log(str.match(reg))    //打印字符串中所有的数字,连续
     
        |     或,类似于js中的 ||
        var reg = /abc|bbc|cbc|dbc/g
        console.log(str.match(reg));   //打印字符串中的abc,bbc,cbc,dbc
        var reg = /[a-c]bc/g
     
        [ ]    中元符
        var reg = /[a-z]/              //匹配所有字母
        [0-9] == d
     
        ^     排除(除了)
        var reg = /[^0-9]/             //表示除了数字之外所有
     
        .   代表所有,不建议使用
        var reg = /<.+>/g
        console.log(str.replace(reg,""))              //过滤,表示尖括号里面的东西不要,但是?
        正则的贪婪定律:
        var reg = /<[^<>]+>/g
        console.log(str.replace(reg,"”))              //表示尖括号里面的东西不要,真
     
        转义字符:
        d    ——    [0-9]         数字
        w    ——    [a-z0-9_]     数字,字母,下划线
        s    ——    空白字符(空格)   
     
        D    ——    [^0-9]        非数字
        W    ——    [^a-z0-9_]    非数字,字母,下划线
        S    ——    非空白字符
     
        量词:限定符,可以指定正则表达式的一个给定组,必须要出现多少次才能满足匹配
        *     匹配前面的子表达式零次或多次
        +     匹配前面的子表达式至少一次或多次
        ?     匹配前面的子表达是零次或一次
        {n}   匹配确定n次
        {n,}  至少匹配n次
        {n,m} 至少匹配n次,最多匹配m次

    正则的方法

        正则.test(字符串)方法,返回值是true和false

        正则.test(字符串)有一个特性,就是只要字符串的一部分符合要求,那么就会返回true

    解决方法:
    ^开始
    $结束
        // 使用正则:
            // 通过方法使用
                // 正则自身的:
                    // reg.test(str);       验证
                    // reg.exec(str);       查找
                // 字符的方法:
                    // str.match(reg);      查找
                    // str.replace(reg,newStr);     替换
                    // str.search(reg)      查找
    exec()找到了返回数组,找不到反回null
     test的特性:验证,局部验证,只要验证的字符的某一部分符合正则,都是true
        // qq号:腾讯
        // var str = "704206198";
        // var reg = /^[1-9]d{5,11}$/;
        // console.log(reg.test(str));
    
        // 邮政编码
        // var str = "152100";
        // var reg = /^d{6}$/;
        // console.log(reg.test(str));
    
        // 固定电话
        // var str = "0504-59271632-123";
        // var str = "0504-59271632";
        // var str = "59721632";
        // var str = "59721632-123";
        // var reg = /^(0d{2,3}-)?[1-9]d{6,7}(-d{1,4})?$/; 
        // console.log(reg.test(str));
    
        // 复杂邮箱
        // var str = "asd34_d@1000phone.com.cn";
        // var reg = /^w{1,10}@[0-9a-z]{2,10}(.[a-z]{2,3}){1,2}$/;
        // console.log(reg.test(str));
        
        // URL
        // var str = "https://baidu.com";
        // var str = "http://www.baidu.com";
        // var str = "www.baidu.com";
        // var str = "mp3.baidu.com";
        // var str = "baidu.com.cn";
        // var reg = /^(https?://)?([0-9a-z]{1,10}.)?[0-9a-z]{2,10}(.[a-z]{2,3}){1,2}$/;
        // console.log(reg.test(str));
    正则表达式手册

     常规检测方式:

    1.中文检测
        unicode编码中文监测:/^[u2E80-u9FFF]+$/
    
    2.用户名检测 
        正则:/^[a-z0-9_-]{3,16}$/
    
    3.邮箱检测
        /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/
          可以多次出现 (字母数字下划线.-)@可以出现多个(数字字母.-).2到6位字母或.
        /^[a-zd]+(.[a-zd]+)*@([da-z](-[da-z])?)+(.{1,2}[a-z]+)+$/
    可以有多个(字母数字)可有多个可无(.多个(字母数字))@可以多个(数字字母可   有1次可无(-数字字母))可以有多个(1或2个.多个字母)
    
    abc123@123abc.com
    
    4.URL检测
        /^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w.-]*)*/?$/
    有1次或0次(http有1次或0次s : //) 可以多个(数字字母.-) . 2到6位(字母.) 可多个或0个 (可以多个或0个 /数字字母下划线.-) 可0或1次/
    
        http://sh.op-ta.l.baidu.com
    
    5.HTML标签检测
        /^<([a-z]+)([^<]+)*(?:>(.*)</1>|s+/>)$/
    <多个(字母)可多个或0个(除了<的所有字符)  />
    <多个(字母)可多个或0个(除了<的所有字符)>多个任意字符   </重复第一部分的多个字母>
    
    
    自定义的html标签
    /<[^<>]+>/g
  • 相关阅读:
    用友 t6 凭证http API
    vue 解决 跳转外部地址携带根路径问题
    JavaScript之assign()——对象浅拷贝 (ES6)
    JavaScript之splice 添加或删除元素
    JavaScript之“==”和“===”
    C#——获取阶乘(递归、循环)
    C#——简单的表示两个数中的(三目运算)
    JavaScript 字符串之截取字符串 ——(substring、substr、slice)
    JavaScrpit之Json实现深拷贝
    Vue之this.$forceUpdate——强制更新数据
  • 原文地址:https://www.cnblogs.com/wuziqiang/p/12076862.html
Copyright © 2011-2022 走看看