美文网首页
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 正则表达式

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

  • Linux命令行与Shell脚本编程大全-shell正则表达式

    本章内容: 定义正则表达式 了解基本正则表达式 扩展正则表达式 创建正则表达式 定义正则表达式 正则表达式是你定义...

  • 正则相关

    正则表达式基本语法 正则表达式常见字符 正则表达式特殊字符 正则表达式数量词 正则表达式边界匹配 正则表达式逻辑或...

  • 正则表达式系列-1

    正则表达式系列-1正则表达式系列-2正则表达式系列-3正则表达式系列-4 什么是正则表达式 正则表达式就是用事先定...

  • 正则表达式

    正则表达式 - 教程正则表达式 - 简介正则表达式 - 语法正则表达式 - 元字符正则表达式 - 运算符优先级正则...

  • Python基础入门 - 正则表达式与综合实战

    1. 初识正则表达式 1.1 介绍 步骤介绍正则表达式入门及应用正则表达式的进阶正则表达式案例 1.2 正则表达式...

  • Java正则表达式参考

    Java正则表达式入门 java正则表达式应用 深入浅出之正则表达式(一) 深入浅出之正则表达式(二) 正则表达式...

  • 正则表达式

    正则表达式 正则表达式就是记录文本规则的代码 正则表达式常用的元字符 正则表达式常用的限定符 正则表达式举例:这里...

  • Python爬虫(十)_正则表达式

    本篇将介绍python正则表达式,更多内容请参考:【python正则表达式】 什么是正则表达式 正则表达式,又称规...

  • python正则表达式

    本篇将介绍python正则表达式,更多内容请参考:【python正则表达式】 什么是正则表达式 正则表达式,又称规...

网友评论

      本文标题:JStask7 正则表达式

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