正则表达式

###什么是正则表达式:regular expression

1.正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript 的 RegExp 类表示正则表达式,
 而String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

2.正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后,表单就会被发送到服务器,
在服务器端通常会用 PHP、ASP.NET java 等服务器语言对其进行进一步处理。
因为客户端验证,可以节约大量的服务器端的系统资源,并且提供更好的用户体验

 ###创建正则表达式

1.两种创建方式
   var box =new RegExp ("nmx");//第一个参数字符串
      var box =new RegExp ("nmx",'ig');//第二个参数可选模式修饰符
    
    var box =/box/; //直接使用两个正斜杠
    var box =/box/ig; //在第二个正斜杠后面加上模式修饰符;

2.元字符(元属性 属性描述符)
  修饰字符的字符 我们叫它元字符

 

3.与正则表达式有关的API
        ①.RegExp 对象的方法
            test 在字符串中测试模式匹配,返回 truefalse 
            exec 在字符串中执行匹配搜索,返回结果数组
        ②.String 对象中的正则表达式方法
            match(pattern)                         
                作用:当一个字符串与一个正则表达式匹配时, match()方法检索匹配项。
                语法:str.match(pattern);
                参数:
                    一个正则表达式对象。如果传入一个非正则表达式对象,
                    则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp
                    如果你未提供任何参数,直接使用 match() ,
                    那么你会得到一个包含空字符串的 Array :[""] 
                返回值:
                    返回命中 pattern的子串或 null
                注意:应该要开启全局
                
            replace(pattern, replacement)     
                作用:replace方法返回一个由替换值替换一些或所有匹配的模式后的新字符串。
                    模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串
                    或者一个每次匹配都要调用的函数。
                语法:str.replace(regexp|substr, newSubStr|function)
                参数:
                    regexp 
                        一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
                    substr 
                        一个要被 newSubStr 替换的字符串。其被视为一整个字符串,而不是一个正则表达式。仅仅是第一个匹配会被替换。
                    newSubStr 
                        用于替换掉第一个参数在原字符串中的匹配部分的字符串
                    function 
                        一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。
                返回值:
                    返回一个由替换值替换一些或所有匹配的模式后的新字符串
                注意:应该要开启全局
                
            split(pattern)                     返回字符串按指定 pattern 拆分的数组
4.模式修饰符的可选参数            参  数  含  义
                i              忽略大小写
                g              全局匹配
                m              多行匹配

 

###RegExp对象的静态属性

        input             $_     当前被匹配的字符串
        lastMatch         $&     最后一个匹配字符串
        lastParen         $+     最后一对圆括号内的匹配子串
        leftContext       $`     最后一次匹配前的子串
        rightContext      $'     在上次匹配之后的子串    
                          $1     第一个分组的内容
                          $2     第一个分组的内容

 

###RegExp  对象的实例属性

    global             Boolean 值,        表示 g 是否已设置
    ignoreCase         Boolean 值,        表示 i 是否已设置
    multiline          Boolean 值,        表示 m 是否已设置
    lastIndex          整数,              代表下次匹配将从哪里字符位置开始
    source                                正则表达式的源字符串形式

 

lastIndex

 只有正则表达式使用了表示全局检索的 "g" 标志时,lastindex属性才会起作用。此时应用下面的规则:
                1.当lastIndex大于源字符串的长度
                    reg.test false
                    reg.exec null
                    lastindex 0

                2.当lastIndex小于源字符串的长度
                    如果匹配成功
                      reg.test true
                      reg.exec 封装了当前匹配成功的子字符串的数组
                      lastindex 紧接着当前匹配成功的子字符串的下一个位置
                    如果匹配失败
                      reg.test false
                      reg.exec null
                      lastindex 0

                3.当lastIndex等于源字符串的长度
                    reg.test false
                    reg.exec null
                    lastindex 0

                4.当匹配空白字符串\s{0}时
                    当lastIndex小于等于源字符串的长度
                    reg.test永远都是 true
                    reg.exec永远都是 ""
                    lastindex不会发生改变

 

###贪婪 和 惰性

  贪 婪                    惰 性
    +                     +?
    ?                     ??
    *                     *?
    {n}                   {n}?
    {n,}                  {n,}?
    {n,m}                 {n,m}?

正则表达式是贪婪的,在全局匹配时会匹配多个
当正则表达式开启惰性时,匹配到第一个就会停止

 

一个坑

var str = "baidu baidu baidu baidu baidu baidu";
    var reg = /baidu/g;
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //false
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //false
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
    console.log(reg.test(str))   //true
正则表达式的贪婪性 匹配全局时,会匹配到空白字符 返回false

 

空白字符

    var reg = /\s{0}/g;
    var str = "a b c";
    console.log(str.match(reg));//(6)["", "", "", "", "", ""]

    var reg = /\s{0}/g;
    var str = "a b c";
    console.log(str.replace(reg,"$"));//$a$ $b$ $c$

    var reg = /\s{0}/g;
    var str = "a b c";
    console.log(str.split(""));//(5) ["a", " ", "b", " ", "c"]
    console.log(str.split(reg));//(5) ["a", " ", "b", " ", "c"]
最佳实践
不要让你的模式字符串 匹配到正则
\s{0}
   \s* a*
   a{0} a* b*

 

首尾去空格

var str ="   前后有空格       ";
   
    function trim(){
        var reg=/^\s+|\s+$/g;
        //var reg = /^\s*|\s*$/g;   最好不要用这种形式   避免命中空白字符
        str=str.replace(reg,"#");
        return str;
    }
    console.log(trim(str)) //#前后有空格#

 

过滤敏感词

<body>
    <textarea id="left" cols="30" rows="10"></textarea>
    <button id="btn">》》》过滤敏感词》》》</button>
    <textarea id="right" cols="30" rows="10"></textarea>

</body>
<script>
    window.onload = function () {
        var arr = ['fuck', "wc", "shit"];
        var strReg = arr.join("|");

        var leftNode = document.querySelector("#left");
        var rightNode = document.querySelector("#right");
        btn.onclick = function () {
            var reg = new RegExp(strReg, "ig");
            var leftVal = leftNode.value;
            var val = "";


            val = leftVal.replace(reg, function (str) {
                var star = "";
                for (var i = 0; i < str.length; i++) {
                    star += "*";
                }
                return star;

            })
            rightNode.value = val;
        }

      

    }
</script>

 

###可重复的子项

    \1 或$1                         匹配第一个分组中的内容
    \2 或$2                         匹配第二个分组中的内容
    \3 或$3                         匹配第三个分组中的内容

###正则表达式中的元字符

修饰字符的字符叫元字符,它们有一些特殊功能, 可以控制匹配模式

 

###字符类:替代字符

 元字符/元符号                         匹配情况
 this|where|logo             匹配 this 或 where 或 logo 中任意一个

 

###字符类:单个字符和数字

元字符/元符号                         匹配情况
        .                         匹配除换行符外的任意字符
    [a-z0-9]                      匹配括号中的字符集中的任意字符
    [^a-z0-9]                     匹配任意不在括号中的字符集中的字符
       \d                         匹配数字
       \D                         匹配非数字,同[^0-9]相同
       \w                         匹配字母和数字及_
       \W                         匹配非字母和数字及_

 

###字符类:重复字符

元字符/元符号                         匹配情况
       x?                         匹配 0 个或 1 个 x
       x*                         匹配 0 个或任意多个 x
       x+                         匹配至少一个 x
      (xyz)+                      匹配至少一个(xyz)
       x{m,n}                     匹配最少 m 个、最多 n 个 x

 

###字符类:锚字符

元字符/元符号                         匹配情况
       ^                            行首匹配
       $                            行尾匹配

 

###字符类:空白字符

元字符/元符号                         匹配情况:
\s 匹配空白字符、空格、制表符和换行符 \S 匹配非空白字符 \0 匹配 null 字符 \f 匹配进纸字符 \n 匹配换行符 \r 匹配回车字符 \t 匹配制表符

 

###字符类:记录字符

元字符/元符号                         匹配情况:
(string) 用于分组 \1 或$1 匹配第一个分组中的内容 \2 或$2 匹配第二个分组中的内容 \3 或$3 匹配第三个分组中的内容

 

posted @ 2019-01-08 21:18  _俗  阅读(160)  评论(0编辑  收藏  举报