`

javascript正则表达式的常用方法总结

    博客分类:
  • js
阅读更多

正则表达式方法: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 的值,从字符串的起始位置开始搜索。

这里需要备注下:上面返回值这段话关于返回数组让我迷惑了好久,因为试验下来返回的都是一个长度的数组,也就是只有一个元素.查了网上很多资料都没有相关的介绍.翻开上次买的"javascript 高级程序设计"一书,在P168有介绍(所谓反向引用,以后介绍)
另外,关于"更新全局 RegExp 对象的属性"我是这样理解的:更新RegExp对象的index和lastIndex属性,在设置了全文匹配参数后可以试验,每次匹配从上一个lastIndex开始搜索.(可以结合下面的属性和后面的例子来体会)

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

    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,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>



 

      例子:(第一篇正则表达式例子)

<!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常用正则表达式

    总结的js常用的正则表达式,如邮箱,手机号码,等等验证方法。

    正则表达式完整高清版

    《正则指引》针对作者在开发中遇到的实际问题,以及其他开发人员咨询的问题,总结出一套使用正则表达式解题的办法,并通过具体的例子指导读者拆解、分析问题。全书分为三大部分:第一部分主要讲解正则表达式的基础...

    正则表达式(学习的好资料)

    C#中的常用正则表达式总结 javascript 验证url的正则表达式 JavaScript中的正则表达式学习1-2 JS与正则式强化训练作业 经典正则表达式 正则表达式--递归匹配与非贪婪匹配 正则式测试工具 等等等等

    JavaScript正则表达式函数总结(常用)

    正则表达式作为一种匹配处理字符串的利器在很多语言中都得到了广泛实现和应用.这篇文章主要介绍了JavaScript正则表达式函数总结,需要的朋友可以参考下

    JS常用正则表达式汇总

    这个收集的很全 ,几乎包含所有的表单验证的函数 以及一些总结 分享给大家

    javascript正则表达式总结

    主要介绍了javascript正则表达式总结,都是些常用的表达式,这里分享给大家,希望大家能够喜欢

    JavaScript高级程序设计(第3版)学习笔记12 js正则表达式

    需要指出的是,这里只是总结了正则表达式的常用的且比较简单的语法,而不是全部语法,在我看来,掌握了这些常用语法,已经足够应对日常应用了。正则表达式不只是应用在ECMAScript中,在JAVA、.Net、Unix等也有相应...

    javascript常用正则表达式汇总

    本文给大家总结了一下常见的javascript检验各种规则的代码,通过正则表达式来实现,都是项目中经常需要用到的,有需要的小伙伴可以参考下。

    一次记住JavaScript的6个正则表达式方法

    来记忆一些常用特殊字符,这个是正则本身的范畴了,是不是总觉得记不住?其实我也记不住,每次都是去搜索和online验证来完成一些任务。我也困恼过,其实最后还是因为自己写的少吧,唯手熟尔。。。下面的总结不写具体...

    javascript IP、域名、手机号码正则表达式验证代码

    一下代码是脚本之家从多个网站整理并总结了下,常用正则表达式的验证代码,可以直接使用。

    JavaScript中正则表达式判断匹配规则及常用方法

    JS作为一门常用于web开发的语言,必然要具备正则这种强大的特性,本文将对JS中的正则用法及常用函数进行一番总结

    javascript基础知识PDF

    2.1 JavaScript 操作对象的简单介绍-- 属性和方法 . . . . . . . . 8 2.2 JavaScript 代码的加入 . . . . . . . . . . . . . . 10 2.2.1 加入JavaScript 代码的方式一 . . . . . . . . . . . . . . . . . . . . . . ...

    JavaScript的String字符串对象常用操作总结

    声明:String对象的方法也可以在所有基本字符串值中访问到。 调用构造函数String(): var str = new String(); var str = new String('hello world');//初始化str,str.length = 11; String访问及查找的方式 1....

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    正则表达式Re模块使用详解 第6周 本节小鸡汤(电影分享) 面向对象介绍 面向对象特性介绍 实例演示opp编程好处 实例变量与类变量 类变量的作用及析构函数 类的继承 经典类与新式类的继承顺序 继承实例讲解 多态...

    Java语言基础下载

    常用类方法说明 132 String的方法 132 正则表示式(Regular expression) 133 StringBuffer类 135 StringBuffer与String的区别 136 集合类的使用 136 实例分析 136 内容总结 153 独立实践 154 第十章:JAVA GUI概述 ...

    asp.net教学讲义

    3.6.5正则表达式匹配验证控件 59 3.7自定义验证控件 62 3.8验证总结控件 64 第四章:ASP.NET内置对象 67 4.1内置对象概述 67 4.2 Response对象和Request对象 67 4.2.1 Response对象的功能,常用属性和方法和示例 67 ...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    常用数据结构(List、Dictionary、Array)、多态、常用设计模式、反射、常用.net类库、泛型、IO流、委托事件、正则表达式、XML、反射、GC等。 2、数据库开发及ADO.Net(6天) 核心技术课程 数据库开发基础、...

    asp.net知识库

    常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算表达式类的原理及其实现 #实现的18位身份证格式验证算法 身份证15To18...

    老男孩python 四期

    12、正则表达式 13、迭代器和生成器 14、lambda 函数使用 15、装饰器 16、项目实践:编写备份程序,具备常规备份、增量备份、差异备份功能 第四天 1、面向对象编程基础 2、类的基本语法 3、编写类练习小程序 4、类的...

Global site tag (gtag.js) - Google Analytics