`
royzhou1985
  • 浏览: 254400 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

正则表达式方法的几个方法介绍match exec search replace split

阅读更多
在介绍正则表达式语法之前先学习下面几个方法:
正则表达式方法:test(),exec()
String对象方法:match(),search(),replace(),split()

   test()方法:
      用法:regexp对象实例.test(字符串)
      返回值:如果满足regexp对象实例中定的正则规则,返回true,否则返回false

   exec()方法:
       用法:regexp对象实例.exec(字符串)
       返回值:如果 exec 方法没有找到匹配,则它返回 null。如果它找到匹配,则 exec 方法返回一个数组,并且更新全局 RegExp 对象的属性,以反映匹配结果。数组的0元素包含了完整的匹配,而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。
如果为正则表达式设置了全局标志,exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志,exec 忽略 lastIndex 的值,从字符串的起始位置开始搜索。

这里需要备注下:上面返回值这段话关于返回数组让我迷惑了好久,因为试验下来返回的都是长度为1的数组,也就是只有一个元素.
另外,关于"更新全局 RegExp, 更新RegExp对象的index和lastIndex属性,在设置了全文匹配参数后可以试验,每次匹配从上一个lastIndex开始搜索.(可以结合下面的属性和后面的例子来体会)

       属性,分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。

例子代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>正则表达式</title>
    <script language="JavaScript" type="text/javascript">
    function regexp_str(){//匹配正则表达式函数
      var getStr=document.getElementsByTagName("input")[0].value;//取得输入
      var regexpStr,arr;
      var searchType=document.getElementsByTagName("input")[1].value;//是否全文搜索
      if(searchType==1){//全文搜索
        regexpStr=/cat/g;//g,全文搜索参数
        while ((arr = regexpStr.exec(getStr)) != null){//当还没匹配完之前
        alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input);
//index是找到匹配的起始位置;lastIndex是找到匹配的末位置+1.比如这个例子:要匹配cat,而你输入的是1cat2cat3,则第一次匹配index为1,lastIndex为4.第二次匹配index为5,lastIndex为8.从这里也可以看出,lastIndex是配置了全文搜索后下一个搜索的开始位置.
//arr是输出整个数组,由于只有一个长度,输出的就是匹配的字符串
//input属性是在这里是输入的字符串,广义来说,就是被搜索的全文,比如上面举例的1cat2cat3
        }
      }
      else{ //一次匹配
        regexpStr=/cat/;
        arr = regexpStr.exec(getStr);
        alert(arr.index + "-" + arr.lastIndex + arr + "---"+arr.input); //由于只是一次匹配,就不要像上面那样用循环了(不然出现匹配情况,每次始终从头开始搜索,不能达到null,陷入死循环)
        }   
    }
    function checkbox_value(){//改变checkbox的值
      var searchType=document.getElementsByTagName("input")[1].value; //取得当前checkbox值
      if(searchType==1) //checkbox值为1改为0,否则改为1
        searchType=0;
      else
        searchType=1;
      document.getElementsByTagName("input")[1].value=searchType;
    }
  </script>
  </head>
  <body>
    <input type="text">
    全文搜索:<input type="checkbox" checked value="1" onchange="checkbox_value();">
    <input type="button" value="查询" onclick="regexp_str();">
  </body>
</html>

    match()方法:
      用法:string对象.match(regexp对象)
      返回值:如果 match 方法没有找到匹配,返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。
      备注:match和exec一个很明显的差别是设置了全文搜索参数g后它返回的数组不再是一个元素,而是所有的元素,第一个匹配结果数组基数为0,第二个为1,以此类推.
      属性:同exec,match也有index,lastIndex,input三个属性,意义也同exec
      exec和match差别比较的例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>Untitled Document</title>
  </head>
  <body>
  <script>
    var str="hello,caolvchong.I love maomao.I should love her forever";
    var reg=/ao/g;
    function execstr(){
      var show=reg.exec(str);
      alert(show.index+"-"+show.lastIndex+"--"+show);//exec只匹配第一个,show是单元素数组,输出第一个匹配项.index和lastIndex分别是第一项的起始和结束位置.要让exec匹配全部,要用上面exec中举的例子,使用while循环
    }
    function matchstr(){
      var show=str.match(reg);
      alert(show.index+"-"+show.lastIndex+"--"+show);//match匹配全部满足正则表达式的式子.show同样是个数组,由于包含了所有匹配项目,一般有多项.javascript中输出数组名将输出全部数组中的内容.当然你也可以用for循环逐个输出各个项,数组下标从0开始.另外,这里的index和lastIndex是最后一个匹配项的起始和结束位置
    }
      
  </script>
  被搜索字符串:Hello,my name is caolvchong.I love maomao.
  用/ao/g正则表达式搜索.<br/>
  <input type="button" value="exec方法搜索" onclick="execstr()">
  <input type="button" value="match方法搜索" onclick="matchstr()">
  </body>
</html>


   search()方法:
      用法:string对象.search(regexp对象)
      返回值:search 方法指明是否存在相应的匹配。如果找到一个匹配,search 方法将返回一个整数值,指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配,则返回 -1.
      注意:返回的只是与正则表达式查找内容匹配的第一个子字符串的位置.所以用全局搜索参数就没有意义了.


   replace()方法:
      用法:string对象.replace(regexp对象|字符串,"替换的字符串")
      返回值:如果设置了全文搜索,则全部满足的都将被替换;否则只替换第一个.返回替换后的字符串.
      注意:replace中还可以接受字符串,但只替换第一个满足条件的字符串.


   split()方法:
      用法:string对象.split([分割符(可以是字符串或正则表达式[,限制输出数组个数]])
      返回值:返回string对象被分割的数组
      注意:string对象不会被split方法修改。分割符是可选项,可以是字符串或正则表达式对象,它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项,返回包含整个字符串的单一元素数组.最后一个选项限制输出数组个数也是可选项,该值用来限制返回数组中的元素个数。
另外,split本身就带有全文匹配的特性,所以可用可不用g参数
从上面分析也可以看出一点:正则表达式比字符串替换功能强大.下面的例子也可以看出.



例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>正则表达式split</title>
    <script>
      function split_by_str(){
        var txtnode=document.getElementById("txt");//取得div节点
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var newtxt=txt.split("AI");//用AI来划分
        for(var i=0;i<newtxt.length;i++){//输出
          alert(newtxt[i]);
        }
      }
      function split_by_regexp(){
        var txtnode=document.getElementById("txt");//取得div节点
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var regtxt=/ai/i;//也可以/ai/gi,这个不影响,split本身具有全文匹配功能
        var newtxt=txt.split(regtxt);//用AI来划分
        for(var i=0;i<newtxt.length;i++){//输出
          alert(newtxt[i]);
        }
      }
    </script>
  </head>
  <body>
    <div id="txt">
      我AI爱ai毛毛,Ai毛毛aI爱AI我!
    </div>
    <input type="button" value="用字符串AI来划分" onclick="split_by_str();">
    <input type="button" value="用正则表达式Ai或ai或AI或aI来划分" onclick="split_by_regexp();">
  </body>
</html>


例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>正则表达式replace</title>
    <style>
      .color_name{/*定义高亮样式:背景黄色,字体粗体红色*/
        color:red;
        font-weight:bold;
        background:yellow;
      }
    </style>
    <script language="JavaScript" type="text/javascript">    
      function change_name(){//替换文本函数
        var txtnode=document.getElementById("txt");//取得div节点
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索
        var newtxt=txt.replace(regstr,"草履虫");//全部替换
        document.getElementById("txt").firstChild.nodeValue=newtxt;//改变文本显示
      }
      function color_name(){//高亮函数
        var txtnode=document.getElementById("txt");//取得div节点
        var txt=txtnode.firstChild.nodeValue;//取得文本值
        var regstr=/tom/gi;//正则表达式:匹配tom,全文不分大小写检索
        var arr=txt.match(regstr);//match方法取得满足匹配的所有字符串
        for(var i=0;i<arr.length;i++){//遍历满足匹配的所有字符串
          var newtxt=txt.replace(regstr,'<span class="color_name">'+arr[i]+'</span>');//替换,实际上就是添加标签,该标签高亮
          txtnode.innerHTML=newtxt;//不能用nodeValue修改,nodeValue不支持转化为html,所以用innerHTML
          }      
      }
    </script>
  </head>
  <body>
  <div id="txt">
    Hello,everyone!
    His name is tom.
    Do you know Tom?
    TOM is a boy who loves football and PC.
    So,do you want to make friends with TOm.
  </div>
  -----------------------------------------<br/>
  把上面的Tom(包括各种形式)高亮或转化为草履虫<br/>
  -----------------------------------------<br/>
  <input type="button" value="高亮TOM" onclick="color_name();">
  <input type="button" value="转化TOM" onclick="change_name();">
  </body>
</html>



例子:(是根据上面exec方法改变了下)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>正则表达式</title>
    <script language="JavaScript" type="text/javascript">
    function regexp_str(){
      var getStr=document.getElementsByTagName("input")[0].value;
      var regexpStr;
      var searchType=document.getElementsByTagName("input")[1].value;
      if(searchType==1){ //是否大小写判断
        regexpStr=/cat/i;
      }
      else{  
        regexpStr=/cat/;
        }
      var arr = getStr.search(regexpStr);
      if(arr==-1){ //没有找到返回-1
        alert("输入的字符串中没有出现cat");
      }
      else{ //找到返回第一次匹配的位置
        alert("第一个匹配cat的字符串出现位置:"+arr);
      }
    }
    function checkbox_value(){
      var searchType=document.getElementsByTagName("input")[1].value;
      if(searchType==1)
        searchType=0;
      else
        searchType=1;
      document.getElementsByTagName("input")[1].value=searchType;
    }
  </script>
  </head>
  <body>
    <input type="text">
    忽略大小写:<input type="checkbox" checked value="1" onchange="checkbox_value();">
    <input type="button" value="查询" onclick="regexp_str();">
  </body>
</html>

(第一篇正则表达式例子)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>正则表达式</title>
    <script language="JavaScript" type="text/javascript">
    function regexp_str(){
      var getStr=document.getElementsByTagName("input")[0].value; //取得输入值
      var regexpStr=/cat/; //建立正则对象,匹配为cat
      if(regexpStr.test(getStr)) //正则对象的test方法,后面会介绍(就是匹配返回true,否则返回false)
        alert("输入的字符串"+getStr+"包含"+regexpStr.source); //正则对象的source属性,后面会介绍(就是返回正则对象设置的匹配值)
      else
        alert("输入的字符串"+getStr+"不包含"+regexpStr.source);
    }
  </script>

  </head>
  <body>
    <input type="text">
    <input type="button" value="查询" onclick="regexp_str();">
  </body>
</html>

分享到:
评论

相关推荐

    各类正则表达式详细手册

    JavaScript还提供了test()、exec()、match()、replace()和split()等方法来操作正则表达式。 3. C#字符串和正则表达式: C#的System.Text.RegularExpressions命名空间提供了Regex类,用于处理正则表达式。创建正则...

    精通 JavaScript正则表达式

    与正则表达式相关的字符串方法有 `match()`(找到匹配项)、`replace()`(替换匹配项)、`search()`(查找匹配项)和 `split()`(根据正则表达式分割字符串)。 例如,下面的代码展示了`test()`方法的工作原理: `...

    使用正则表达式的模式匹配

    JavaScript的`String`和`RegExp`类提供了多个方法来利用正则表达式: 1. **String.prototype.match()**:返回字符串中与正则表达式匹配的所有结果。 2. **String.prototype.search()**:返回匹配项的索引位置,如果...

    javascript正则表达式详解

    JavaScript提供了正则表达式的API,包括test、exec、search、match、replace等,每个都有不同的功能和用法。例如,exec方法可以循环匹配字符串,而test方法可以检查字符串是否符合正则表达式。修饰符g、i和m分别用于...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十:正则表达式

    八、正则表达式的使用方法 1. `test()`:在字符串中查找是否存在匹配项,返回布尔值。 2. `exec()`:在字符串中查找匹配项,返回一个数组,包含匹配到的内容和位置信息。 3. `match()`:返回字符串中所有匹配正则...

    正则表达式精灵绿色板

    8. **字符串方法与正则**:JavaScript的字符串对象有多个与正则相关的函数,如`match()`、`search()`、`replace()`和`split()`。它们接受正则表达式作为参数,执行不同的操作。 9. **使用工具**:正则表达式精灵...

    JavaScript正则表达式详解及使用方法

    同时,文章还通过具体示例展示了如何在JavaScript中使用正则表达式的exec、test、match、replace、search和split方法。 适合人群:具备基本JavaScript编程基础,对正则表达式有一定了解的开发人员。 使用场景及目标...

    JS常用正则表达式及其使用方法

    - **exec()**:执行一个正则表达式的搜索,找到匹配的文本,并返回一个结果数组。如果没有找到匹配,返回null。 ```javascript var regex = /\d+/; var str = "abc123def"; var match = regex.exec(str); ...

    javascript正则表达式学习笔记

    2. `exec()`:执行一个正则表达式并返回匹配结果,如果没有找到匹配项,则返回null。 3. `match()`:在字符串中搜索匹配正则表达式的子串,返回一个数组。 4. `search()`:返回字符串中匹配正则表达式的第一项的索引...

    精通 JS正则表达式

    - `exec()` 方法:用于查找字符串中与正则表达式模式相匹配的第一个实例,并返回一个包含匹配结果的数组。 - `compile()` 方法:用于重新编译正则表达式的模式,以便更快地执行。 此外,正则表达式对象还有一系列...

    正则表达式帮助文档api

    正则表达式的API通常包括`compile`(编译正则表达式)、`test`(检查是否匹配)、`match`(获取匹配结果)、`exec`(执行匹配并返回结果数组)、`replace`(替换匹配的子串)和`split`(按正则表达式分割字符串)等...

    传智播客_张孝祥_JavaScript7_正则表达式

    "传智播客_张孝祥_JavaScript7_正则表达式"这个课程可能详细讲解了JavaScript中的正则表达式及其应用。 1. 正则表达式基础: - 定义:正则表达式是一种模式匹配工具,用于描述一种特定的字符串模式。 - 基本元素...

    js正则表达式(例子).rar

    - `split()`:根据正则表达式分割字符串,返回分割后的数组。 5. **高级用法** - **分组捕获**:使用括号 `( )` 创建分组,捕获子匹配。 - **反向引用**:`\number` 引用前面第number个捕获组的内容。 - **非...

    JavaScript经典正则表达式实战

    JavaScript正则表达式是编程语言JavaScript中的一个重要组成部分,它用于处理文本字符串,进行模式匹配、查找、替换等操作。在JavaScript中,正则表达式是一种强大的工具,可以帮助开发者实现复杂的数据验证、文本...

    JavaScript正则表达式小结(test|match|search|replace|split|exec)|angluo-javascript-172930.pdf

    JavaScript提供了六种与正则表达式相关的方法,分别对应于不同的应用场景:test、match、search、replace、split、exec。 1. test 方法:用于检测一个字符串是否匹配某个模式,如果字符串中有符合模式的子串返回 ...

    JAVA正则表达式JAVA正则表达式JAVA正则表达式

    JavaScript提供了一个RegExp对象,可以用来创建和操作正则表达式。 4. 正则表达式的方法 正则表达式提供了多种方法来操作字符串,例如: * test():检查指定的字符串是否存在。 * exec():返回查询值。 * match()...

    【第十二章】JavaScript【正则表达式(1)】

    - search():返回字符串中第一个匹配正则表达式的位置,没有找到返回-1。 - replace():用新字符串替换匹配的子串,返回替换后的字符串。 - split():根据正则表达式分割字符串,返回一个数组。 5. 具体应用实例...

    正则表达式详细教程正则表达式详细教程

    6. `split()`:这个方法根据提供的正则表达式将字符串分割成数组。例如,`"123123,213,12312,312,3,Cat,cat,dsfsdfs,".split(/,\s*/)`将返回一个包含所有逗号分隔的子串的数组。 正则表达式还支持各种字符类,包括...

Global site tag (gtag.js) - Google Analytics