美文网首页
JStask7 正则表达式

JStask7 正则表达式

作者: YM雨蒙 | 来源:发表于2017-09-03 23:45 被阅读47次

    题目1: \d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^,$分别是什么?

    正则简介

    题目2:写一个函数trim(str),去除字符串所有的空白字符

    function trim(str){
      var reg = /\s/g
      var newStr = str.replace(reg,"")
      return newStr
    }
    var a = "        1  2    4  "
    console.log(trim(a))  //"124"
    

    ### 题目2.1:写一个函数trim(str),去除字符串两边的空白字符

    function trim(str){
      var reg = /^\s+|\s+$/g
      var newStr = str.replace(reg,"")
      return newStr
    }
    var a = "        1  2    4  "
    console.log(trim(a))  //"1  2    4"
    
    

    题目3: 写一个函数isEmail(str),判断用户输入的是不是邮箱

    //判断邮箱
    function isEmail(str){
      if(!/(\w{8,})@[a-z0-9]{2,3}\.com$/.test(str)){
            console.log("我不是邮箱")
      }else{
        console.log("欢迎使用")
      }
    }
    isEmail("1614527443@qq.com")
    
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
    <label>邮箱:</label><input type="text" onblur="checkNetEase(this)" onfocus="reset(this)" placeholder="邮箱">
    <script>
        function checkNetEase(mobileInput){
            var value = mobileInput.value;
            /*我对邮箱的规则不是太清楚
             *用户名至少8位吧
             *@后面观察qq,网易等,不超过3个字符
             *以.com结尾
             */
            if(!/(\w{8,})@[a-z0-9]{2,3}\.com$/.test(value)){
                mobileInput.style.borderColor = 'red';
            }
        }
    
        function reset(mobileInput){
            mobileInput.style.borderColor = '';
        }
    </script>
    </body>
    </html>
    

    题目4: 写一个函数isPhoneNum(str),判断用户输入的是不是手机号

    //判断手机号
    function isPhoneNum(str){
       if(!/^1\d{10}$/.test(str)){
           console.log("不好意思,请您重新输入手机号")
       }else{
         console.log("OK")
       }
    }
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
      <script>
          function check(mobileInput){
              var value = mobileInput.value;
              //手机第一位是1,后面有十位数字
              if(!/^1\d{10}$/.test(value)){
                  mobileInput.style.borderColor = 'red';
              }
          }
    
          function reset(mobileInput){
              mobileInput.style.borderColor = '';
          }
      </script>
    </body>
    </html>
    

    题目5: 写一个函数isValidUsername(str),判断用户输入的是不是合法的用户名(长度6-20个字符,只能包括字母、数字、下划线)

    function isValidUsername(str){
      if(/^\w{6,20}$/.test(str)){
        console.log("我是合法的用户名")
      }else{
        console.log("我不是合法的")
      }
    }
    isValidUsername("str1234")
    

    题目6: 什么是贪婪模式和非贪婪模式

    参考博客

    贪婪模式

    • 默认情况下,?, +, *, {min,}, {min, max}都是贪婪的。

    先看一个正则:

    var str = 'a "witch" and her "broom" is one';
    str.match( /".*"/g);  //[""witch" and her "broom""]
    
    结果匹配的不是["witch"],也不是["broom"],而是[""witch" and her "broom""]
    

    我们来看一下正则

    1. 第一个字符是",所以正则匹配到第一个"
    2. .(点号)*(星号)点号代表任意字符星号代表任意字符重复一次到多次,没有遇到点号不能匹配的字符,所以一直到最后
    3. 文本结束后,点的匹配停止了,但仍然有剩余的的正则需要匹配,即:"因此,正则引擎开始倒过来回溯,换句话说,就是一个字符一个字符缩减匹配。
    4. 一直字符缩减到匹配到"
    5. 所以结果是[""witch" and her "broom""]

    总结:在贪婪(默认)模式下,正则引擎尽可能多的重复匹配字符

    非贪婪模式

    • 非贪婪模式和贪婪模式相反,可通过在代表数量的标示符后放置?来开启非贪婪模式,如?、+?甚至是??
    上一个例子
    var str = 'a "witch" and her "broom" is one';
    str.match(/".*?"/g )  // [""witch"", ""broom""]
    
    惊不惊喜意不意外?结果竟然不一样
    

    我们继续看一下正则

    • 看看非贪婪模式.?是怎么运转的。
    1. 第一个字符是",所以正则匹配到第一个"
    2. 第二步一样, .被匹配上
    3. 第三步区别来了,正则引擎尝试用最小可能的重复次数来进行匹配,因此在.匹配了w后,它立即尝试"的匹配
    4. .重复更多的字符,再进行尝试.
    5. 匹配,终于匹配到"witch"
    6. 因为正则是global的,所以正则引擎继续后面的匹配,从引号后面的a字符开始。后面有匹配到第二个字符串"broom"

    总结:在非贪婪模式下,正则引擎尽可能少的重复匹配字符

    相关文章

      网友评论

          本文标题:JStask7 正则表达式

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