可视化工具

一、初识正则

定义:规定字符串中字符出现规则的表达式
何时使用:查找，验证，替换，切割

二、RegExp对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

2-1 直接量语法

  1. /pattern/attributes
  2. var reg = /a/g

2-2 创建RegExp对象的语法

  1. new RegExp(pattern, attributes);
  2. var reg = new RegExp(/a/,"g");

参数：

  • 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
  • 参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。


三、正则对象方法

方法 描述 FF IE
compile 编译正则表达式。 1 4
exec 检索字符串中指定的值。返回找到的值，并确定其位置。 1 4
test 检索字符串中指定的值。返回 true 或 false。 1 4

3-1 test()

test() 测试字符串中是否存在匹配正则表示式的字符串,匹配返回true,不匹配返回false，为局部而生，最好不要用g
它从匹配字符串的第一位开始找,一直将匹配到的找完,再遇到不匹配的就从头开始找

  1.        var reg=/1/g;        
  2.         var p="12344";
  3.         console.log(reg.test(p))    //true,/0/g:false
  5.        /*  var str="aahah";
  6.         var reg=/a/g;                  
  7.         console.log(reg.test(str))      //true
  8.         console.log(reg.test(str))      //true
  9.         console.log(reg.test(str))      //true   
  10.         console.log(reg.test(str))      //false  
  11.         console.log(reg.test(str))      //true  
  12.         console.log(reg.test(str))      //true  
  13.         console.log(reg.test(str))      //true  
  14.         console.log(reg.test(str))      //false    */
  15.                 //一共有三个匹配的,所以先输出三个true,再返回false
  16.                 //它从匹配字符串的第一位开始找,一直将匹配到的找完,再遇到不匹配的就从头开始找
  18.         var str="aaha";
  19.         var reg=/a/g;
  20.         while(reg.test(str)){
  21.             /* lastIndex:是当前表达式匹配内容的最后一个字符的下一个位置 */
  22.             console.log(reg.lastIndex)  //1,2,4
  23.         }
  24.         console.log(reg.test(str))  //1
  25.         console.log(reg.test(str))  //2
  26.         console.log(reg.test(str))  //4

四、正则对象语法

4-1 修饰符

  1. .global:是否全文搜索
  2. .ignore case:是否大小写敏感
  3. .multiline:多行搜索
  4. .lastIndex:是当前表达式匹配内容的最后一个字符的下一个位置

4-2 字符集

4-2-1 备选字符集

规定某一位字符的备选字符列表

  1.        /* 上海，上天，上去，替换成 ** */
  2.          var reg=/上[海,天,去]/g;
  3.         var str="我要去上海，上去看东方明珠，然后上天";
  4.         console.log(str.replace(reg,"**"))    //我要去**，**看东方明珠，然后**

4-2-2 连号的备选字符集

  • [0-9] //数字
  • [a-z]/ig //大小写
  • [a-zA-Z]/g //大小写

  • [a-zA-Z0-9]/ig //字母和数字

    1. /* 连号的备选字符集*/
    2. var str="232332eRGsgsg";
    3. var reg=/[0-9]/g;
    4. console.log(str.replace(reg,"**"))                           //************eRGsgsg
    5. console.log(str.replace(/[a-z]/ig,"**"))            //232332**************
    6. console.log(str.replace(/[a-zA-Z]/g,"**"))      //232332**************
    7. console.log(str.replace(/[a-zA-Z0-9]/ig,"**"))  //**************************

    4-2-3 预定义字符集

    针对常用的备选字符集提供的简化符号

  • [0-9] \d 数字进行替换

  • [0-9a-zA-Z_] \w 包含数字字母所有的进行替换
  • 空格 \s
  • . 表示除换行以外所有的字符 
    1. var reg=/\d/g;
    2. var str="23253535higkk_";
    3. var st="22434gegegregr";
    4. var p="hello   world"
    5. console.log(str.replace(reg,"**"))          //****************
    6. console.log(st.replace(/\w/g,"**"))         //****************
    7. console.log(p.replace(/\s/g,"**"))          //hello******world
    8. console.log(str.replace(/./g,"**"))     //****************************

4-3 量词

规定某一位字符出现的次数 必须是连号
特点:默认一个量词，仅修饰左侧紧邻的字符集

4-3-1 确定数量

  • {m,n} —>至少m个，最多n个
  • {m,} —>m个以上
  • {m} —>必须m个 ```javascript / {3} 某一位字符只出现3次 bug:不止3个 {3,6} 3到6次及 //用test() 可以检测3-6个及以上 {3,} 3次以上 / var reg=/\d{3,6}/ var str=”343432424234gaga”; console.log(reg.test(str)) //true

/ 三个数字+天 / var reg=/\d{3}天/g var p=”23243224天地介绍了附件435天” console.log(p.replace(reg,”“)) //23243地介绍了附件**

  1. <a name="zkEFw"></a>
  2. #### 4-3-2 不确定数量
  4.    - ?   -->一个或0个                   {0,1}      //用test(),符合条件的就为true
  5.    - +   -->一个或者一个以上       {1,}
  6.    - *    -->0个或者多个               {0,}
  7. ```javascript
  8. var reg=/\d?/;
  9. var str="2355345gsgsgsg"
  10. console.log(reg.test(str))   //true,无论数字多少，始终返回true

4-4 匹配位置

4-4-1 匹配

  • ^ 以什么开头
  • $ 以什么结尾
  • /^\s+|\s+$/g 以空格开头和以空格结尾 相当于trim()
    • 何时使用:仅匹配开头的规则和结尾的规则时使用
      var str="    hello world";
var s="hello    ";
var t="   hello world   "
var reg=/^\s+/
console.log(str.replace(reg,"**"))      //**hello world
var r=/\s+$/;
console.log(s.replace(r,"**"))      //hello**
console.log(t.replace(/^\s+|\s+$/g,"**"))   //**hello world**

      4-4-2 严格匹配

      /^ $/ 为严格匹配
      Tip : 只要验证时，必须前加^,后加$！
      var reg=/^\d{11}$/
var str="12344738392"
console.log(reg.test(str))     //true  必须以数字开头和数字结尾并且只有11位

4-5 贪婪模式和懒惰模式

贪婪模式：正则表达式默认为贪婪模式 , 默认从符合条件的第一个开始作用 , 且作用最多个
懒惰模式：量词后面加问号 , 变为非贪婪模式 , 默认从符合条件的第一个开始 , 且作用最少个

var str="wfwgs87589442gsgsgs";
var reg=/\d{3,6}/
console.log(str.replace(reg,"*"))     //wfwgs*42gsgsgs   默认替换6个
console.log(str.replace(/\d{3,6}?/,"*"))   //wfwgs*89442gsgsgs  替换3个

五、字符串中支持正则的方法

var str = "hello";
 console.log(str.match(/l/g));// ["l", "l"]
//g表示全局搜索

2.replace() 替换匹配的对象

//语法
stringObject.replace(regexp/substr,replacement)

var a = "hello";
var reg = /l/g;
console.log(a.replace(reg,"*")); //"he**o"

3.search() 方法用于检索字符串中指定的子字符串的位置

//语法
stringObject.search(regexp)/
//注释：如果没有找到任何匹配的子串，则返回 -1。

复制

var a = "hello world";
var reg = /w/;
console.log(a.search(reg));  //6

4.split(reg) 将字符串分割成数组

var a = "helo";
var reg = /l/;
console.log(a.split(reg)); //["he", "o"]

六、实例

正则验证大全

6-1 手机,邮箱验证

手机正则：/^1[3-9]\d{9}$/ 

const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

邮箱正则：/^[0-9a-z]+@[0-9a-z]+.com$/ 

regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

6-2 密码验证

要求：字母数字，密码长度不小于8位以字母开头
密码正则：/^[a-z]+[a-z0-9]{7,}$/i //有bug,纯字母不符合要求，但是仍然输出

var reg=/^[a-z]+[a-z0-9]{7,}$/i
console.log(this.pwd.trim())
if(!reg.test(this.pwd.trim())){
  alert("密码应该以字母开头，包含数字字母，长度不小于8位")
}

6-3 身份证匹配

要求：18位 …xX
正则：/^\d{17}[0-9xX]$/i

var res=/^\d{17}[0-9xX]$/;
if(!res.test(this.number)){
     console.log(this.number)
     alert("身份证号不正确")
}