5分钟教你学会JavaScript正则表达式

时间:2023-03-09 19:45:51
5分钟教你学会JavaScript正则表达式

  正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻,本文仅仅只是教你如何在几分钟之类学会正则表达式,对于它的原理及运行机制不做介绍。

第一:什么是正则

  正则表达式是一种用来描述一定数量文本的模式,用来匹配相同规范样式的文本。在JavaScript中用RegExp对象表示正则表达式( 即Regular Eexpression),它是对字符串执行模式匹配的强大工具。我们可以参看W3C所给的说明。

 5分钟教你学会JavaScript正则表达式

第二:创建一个正则表达式

  在JavaScript中创建正则表达式,有2种方式,隐式显式创建。 (gi 后文会给出解释)

  隐式创建:

 var regExp=/正则表达式/gi;  

  显式创建:

 var regExp=new RegExp("正则表达式","gi");

  由两种创建方式我们已经知道了正则表达式的基本构建方法。即 /正则表达式/gi;

在具体介绍正则表达式的使用细则及语法之前,我们先来学习JavaScript中RegExp类的两个方法,以方便我们后文的代码讲解,更多方法参看W3C文档。

  ①match:找到一个或多个正则表达式的匹配。

    W3C所给的解释为match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

  ②replace:

    replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

鉴于RegExp方法较多,此处我们暂列两个,方便后文使用。

第三:语法详解

  我会根据循序渐进的方式帮助大家理解正则的具体语法,提出问题,然后代码解决。

  ①匹配字符串中是否存在abc字符串,并返回

    正则表达式 /abc/gi

代码:

 var content=id.innerText;         // 获取需要匹配的字符串内容
var myreg=/abc/gi; // 正则表达式
res=content.match(myreg);
for(var i=0;i<res.length;i++){
window.alert(i+" "+res[0]); // res详情参考W3C文档
}

  由上可以知道,我们若要匹配某个具体的字符串,只需在两个 / 字符之间写入匹配的字符串。

  ②匹配 1221、112233、010-11223344 形式的字符串

当需要匹配上述字符串时,我们采用第一种方法已经不能适用。在讲述新方法之前,先讲解如何匹配数字表示和反向引用的一些粗浅知识。

  匹配数字我们用\d表示,在JavaScript正则表达式中用()包括起来的内容是一个子表达式,如:\(\d)(\d)\gi 其中第一个括号表示第一个子表达式,第二个括号表示第二个子表达式。现在给出1221的正则表达式,为

/(\d)(\d)\2\1/gi;   // 1221  2334  5667 类似格式的数字

  上述\2\1大家不理解什么意思,这就要牵涉反向引用的概念了,\2表示匹配的是和第二个子表达式的相同的内容(即在此处第二个数和第三个数相同),\1表示匹配的是和第一个子表达式的相同的内容(即在此处第一个数和第四个数相同)。

  当我们理解了反向引用的概念后,匹配后面2个格式的表达式就很轻松了。

  112233格式:

/(\d)\1(\d)\2(\d)\3/gi;      // 112233  334422 类似格式的数字

  010-11223344格式:

/(\d){3}-(\d)\2(\d)\3(\d)\4(\d)\5/gi;        

  该正则表达式,(\d){3}表示为3个数字。

  例子:

    若我们用1{3}匹配1111111会得到多少什么结果?用1{3,4}匹配1111111会得到什么结果?编写程序证实你的猜想。({3,4}表示匹配至少3个,至多4个)

看到此处,希望读者能够运用我上述所讲的方法,证实自己的猜想,因为里面牵涉JavaScript正则匹配的两个规则。

    答案:

      1{3}匹配1111111得到111  111。这是因为正则匹配的时候,当匹配到一个字符串时,会自动从下一个字符开始匹配。

      1{3,4}匹配1111111得到1111  111。JavaScript匹配的时候遵循一个贪婪原则,即尽可能匹配多的,当多的匹配不满足时,才退而求其次,在此处若能匹配到1111则会先匹配4个1,匹配不到则匹配111。

  ③+、*、?讲解

    +:表示匹配1次到任意多次

    如:

/a+/gi;             // 匹配 a一个至多个
/(\d)+/gi; // 匹配 数字一个至多个

    *:表示匹配0次到任意多次

    如:

/a*/gi;
/(\d)*/gi;
/a1*/gi; // 若匹配a111 得到a111

    ?:表示匹配0次到1次

/a1?/gi;              // 若匹配a111  得到a1

  ④{}、[]、^、$ 讲解

    {}:上文已经提及,表示具体量

    []: 表示范围

    如:

/[a-z]/gi;                       // 匹配 a到z  的任意1个字符,等价于/[a-z]{1}/gi
/[a-z]{2}/gi; // 匹配 a到z 的任意2个字符

    ^:表示“匹配目标字符串的开始位置”,若此字符若位于[]括号内,表示“否定”的意思

    如:

/[^a-z]/gi;              // 不是a到z的任意一个字符
/[^0-9]/gi;    // 不是0到9的任意一个字符
/^[a-zA-Z0-9]{2}/gi; // 以数字或者字母开头的2个字符

    $:表示“匹配目标字符串的结束位置”

  ⑤其他字符表示

    \D :\d的反面,匹配非数字 ,即等价于[^0-9]

    \w :匹配任意英文字符

    \W:\w的反面,匹配非英文字符 ,即等价于 [^a-zA-Z0-9_]

    \s  :  匹配任何空白字符(空格,制表符等)

    \S :\s的反面,即匹配任何非空白字符

    .   : 匹配出 \n 之外的所有字符,如果要匹配,匹配自己则需要使用 \. (即匹配. 为/\./gi)

  ⑥需要转义的字符:

    正如⑤中的 . 所示,当需要匹配 . 的时候,我们需要加上转义字符。总结一下,JavaScript中匹配字符需要用到转义字符的有。 

    .  *  +  ( )  $  /  \  ?  [  ]  ^  {  }

  ⑦选择匹配符 |

    在正则匹配的时候,有时需要匹配多个正则表达式,此时则需要用到选择匹配符|,可以看做是编程中“或”的意思

    如:

/[a-z]{3}|[A-Z]{2}/g;           // 匹配a到z的3个字符或者是A到Z的2个字符都可

第四:最后补充

  讲解一下正则表达式中gi所表达的意思。之所以放在文章最后,是为了帮助大家直接了解正则有关的内容,更快的方式来使用它。

gi是RegExp类中的实例属性:其实有gims四个,其中:

  g: global之意,表示全局匹配

  i:  ignoreCase之意,表示忽略大小写

  m: multiple之意,表示多行匹配,即考虑换行这个因素,即匹配时将换行后的字符串当作新的一个字符串匹配

  s: source之意,表示返回创建RegExp对象实例时指定的表达式文本字符串

正则匹配时根据需要填写相应的属性。

  最后,希望这篇文章能够真正帮助到那些正则学习正则表达的人们,小白一枚,粗浅言论,希望大家勿喷。

  给大家一个js验证表单的网址,里面有一些正则表达式验证,可以学学稳固一下知识:http://www.jb51.net/article/4976.htm