JavaScript正则表达式的简单介绍和一些小例子（一）

一、本篇需要用到的方法

     对字符串进行操作有许多方法，如：

     indexOf()方法，lastIndexOf()方法两者用于查找字符串

     substr()方法，复制字符串的一个字串，为了更好的理解和应用正则表达式，本篇会介绍下面的方法，其余的不再赘述。

    replace()方法：

          该方法在字符串中搜索字串，当找到匹配的字串后，将其替换为第三个字符串。

          用法：字符对象.replace("需要替换的字符串"，"替换的字符串")；

          可见，其中包含两个参数。

          例一：

<script>        var mystring = "hello world";        var mystring = mystring.replace("world","Boy");alert(mystring);</script>

二、正则表达式的认识

     1.什么是正则表达式？

          （1） 正则表达式是一种定义字符的模式方法，我们可以拆分，查找或替换字符串中与模式字符匹配的内容。

          （2）正则表达式是通过RegExp对象来使用的，该对象是JavaScript中的一个内置对象，用于存储检索模式。

    2.RegExp对象的创建？

          （1）var myRegExp = /模式字符/；

          （2）var meRegExp = new RegExp("模式字符")；即使用RegExp()构造函数

           其中第一种更加简短有效。

    3.关于正则表达式的属性字符

            属性字符        说明

            G                    查找所有与模式匹配的子串，而非只找出一个就停止

            I                      模式不区分大小写

            M                    多行标志。指定特殊字符可以匹配多行文本和字符串的开始和结束

            例二：将指定字符串替换为字符串"aaa".

<script> var mystring = "paul,Paul,Paula,fffPaul"; var myRegExp = /paul/gi; mystring = mystring.replace(myRegExp,"aaa"); alert(mystring);</script>

           本例中的文本模式为paul,并且运用了g属性和i属性，因此会查找到字符串中所有的paul,并且不区分字符大小写，然后将这些字符串都变为aaa.
           但是这样的话就会产生许多问题，比如说将Paula变成了aaaa,但是实际上我们是不想改变Paula的

     4.正则表达式的方法

            （1）test()方法

             用于检索字符串中的指定值，满足返回true,反之返回false.

             例三：

 <script> var Input = prompt("请输入","");  function create(tii) { var myRegExp = /[a-z]/i; return(myRegExp.test(tii)); } if(create(Input)) { alert("输入正确"); }else{ alert("您输入的具有无效字符"); } //正则表达式的小例子 </script>

              此处create()函数的返回值为后面的if提供了条件，要是输入的都是字母，则返回true,反之，则返回false.

            （2）exec()方法

             用于检索字符串中的指定值，返回值为被找到的值，要是没有找到，则返回null.

             例四：

 <script> var myRegExp = /l/; document.write(myRegExp.exec("hellohello")); </script>

              网页上写入的是字母l,由此可见，它只会返回第一个找到的字符串然后就停止，那要是想返回所有的l呢？

             例五：

 <script> var patt1=new RegExp("l","g");do{result=patt1.exec("hellohello");document.write(result);}while (result!=null)  </script>

             需要注意的是：带有g参数和没有带参数的返回值都是一个数组，只不过没有带g参数的exec()方法在数组的第一个元素存着匹配的字符串。

     5.正则表达式---特殊字符

            （1）文本，数字和标点符号

              字符类                               匹配的字符                                        实例

              \d                                       0~9的数字                                         \d\d---匹配11

              \D                                      任何非数字字符                                 \D\D\D不会匹配123

              \w                                      任何A~Z,a~z,0~9,以及下划线_         \w\w\w---匹配aB_

              \W                                     任何非单词字符                                 \W匹配@

              \s                                       任何空白字符                                    \s与制表符、回车符、换页符

              \S                                      任何非空白字符                                 \S不与制表符、回车符、换页符相匹配

              .                                        除换行符（\n)之外的任意单个字符    .匹配@，1，a

              [...]                                    匹配出位于方括号之内的字符            [123]匹配1,2,3，不匹配其他

              [^...]                                  匹配除方括号内的所有字符               [^abc]匹配除a,b,c之外的任何字符

              例如：要匹配一个8位的学号：\d\d\d\d\d\d\d\d.

              但是我们不难发现，要是数字更加多的话，要写的\d的就更多，也就更麻烦，所以就有了重复字符。

             （2）重复字符

               正则表达式包含重复字符，用来指定要匹配多少个后一项或者字符，这样就会减少很多麻烦。

               特殊字符                         含义                                                     实例

               {n}                                    前一项出现n次                                    x{2}与xx相匹配

               {n,}                                   前一项出现n次,或者出现n次以上        x{2,}与xx,xxx,xxxx等相匹配

               {n,m}                                前一项至少出现n次，最多出现m次    x{2,4}与xx,xxx,xxxx相匹配

               ?                                      前一项出现0次或者1次                        x?与空串或者x相匹配

               +                                      前一项出现1次或者多次                      x+与x,xx,xxx等相匹配

               *                                      前一项出现0次或者多次                       x*与空串，x,xx,xxx等相匹配

               则上面的学号可以写为\d{8}.

             （3）位置字符

              位置字符                           描述

              ^                                        匹配的是字符的开头,在多行检索中,匹配的是一行的开头

              $                                        匹配的是字符的结尾,在多行检索中,匹配的是一行的结尾

              \b                                       匹配单词分界位置，即单词字符与非单词字符之间的位置

              \B                                       匹配非单词分界位置

              例六：

<script> var mystring = "hello,hey,girl,world."; var myRegExp = /\b/g; mystring = mystring.replace(myRegExp,"*"); alert(mystring);</script>

            网页中弹出的结果为：*hello*,*hey*,*girl*,*world*.

            由此可见，任何数字，字母，下划线字符之间的位置以及任何非单词字符都是单词分界，需要注意的是字符串的开始或结束位置也都是单词分界。

            例七：在例二的基础上，我们来看看例四

 <script> var mystring = "paul,Paul,Paula,fffPaul"; var myRegExp = /\bpaul\b/gi; mystring = mystring.replace(myRegExp,"boy"); alert(mystring); </script>

网页弹出的结果是：boy,boy,Paula,fffPaul.

           由此可见，这样运用位置字符，就能很好的确定替换的字符。

           （5）正则表达式广泛应用于表单的验证，用于指出用户输入的错误，一个小例子：

            例八：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>login</title><style>*{margin:0px;padding:0px;}body{background-color:#E7EEF4;position:relative;}.big{width:95%;height:1000px;/*background-color: white;*/margin:auto;}.head{width:100%;height:7.5%;background-color:white;margin: auto;text-align:center;line-height:75px;border:1px solid lightblue;border-radius:30px;}.head h1{font-size:30px;font-family:楷体;}.picture{width:35%;height:50%;/*background-color: yellow;*/margin-left:10%;margin-top:15%;}.middle{width:25%;height:60%;position:absolute;background-color: white;left:50%;top:30%;}.link{width:65%;height:7%;margin-top:10%;border-color:lightblue;margin-left:14%;font-size:20px;}.same{width:33%;height:8%;margin-top: 5%;margin-left:30%;font-size:22px;background-color: lightblue;}</style></head><body><div class="big"><div class="head"><h1>小星星网站---登录</h1></div><div class="middle"><input type="text" value="账号" class="link" id="admin"/><br/><input type="password" class="link" id="pass"/><br/><input type="submit" value="登录" class="link" onclick="bigReg()" style="width:33%;margin-left:30%;background-color: lightblue;"><br/><input type="submit" value="微信登录" class="same" style="margin-top:30%;"><br/><input type="submit" value="QQ登录" class="same"></div><div class="picture"><img src="img/katoo.png" width="100%"/></div></div><script>function bigReg(){var zhanghao = document.getElementById("admin").value;var mima = document.getElementById("pass").value;function oneReg(yanzheng){var myRegExp = /\d{10}/;return(myRegExp.test(yanzheng));}if(oneReg(zhanghao)){if(zhanghao.length==10)alert("输入正确");elsealert("数字是10位哦");}else{alert("您只能输入10位数字哦");}}</script></body></html>

             为了样式的明显，此处简单制作了一个表单，其中登录时规定了账号为10位数字，当用户账号输入有错时，网页会弹出错误。