正则表达式理解及简单应用举例-CSDN博客

正则表达式述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

例如：

runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 号代表前面的字符必须至少出现一次（1次或多次）。
runoo*b，可以匹配 runob、runoob、runoooooob 等，* 号代表字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。
colou?r 可以匹配 color 或者 colour，? 问号代表前面的字符最多只可以出现一次（0次、或1次）。

构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。

正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

正则表达式具有强大的作用，概括起来主要有以下3点：

1）测试字符串的模式；

2）替换文本；

3）根据模式匹配从字符串中提取一个字符串。

1.正则表达式的创建(javascript)

在JavaScript里，正则表达式有两个构造方式，一个是通过RegExp这个构造函数创建实例，另一个是正则表达式字面量写法。

创建方式1:

    var reg = new RegExp();//创建对象    
    reg = new RegExp("c");  //匹配字母c    
    reg = new RegExp("c","gi"); //表示不区分大小写匹配字母c复制代码

创建方式2:

   var reg = /c/gi;复制代码

2.正则表达式中的几个概念

1.元字符

元字符听起来也很抽象，其实换个例子就容易理解：学习如何学习，叫元学习；关于知识的知识，叫元知识。·

元字符，则是描述字符的字符，比如，数字，字母，空格，换行等。

元编程，就是能生成代码的代码，在 Javascript 构造符合语法的字符串，放到eval(code)里运行一下，你就在元编程了。

列举几个元字符。元字符大多以反斜杠开头 \，因为前面展示的「正则表达式字面量」写法里，用的是两个斜杠包裹，所以得用反斜杠或其他标识符。

\d，匹配单个数字（即匹配0到9单个数字）；d 是 digit 这个单词的缩写，它的中文意思就是「数字」
\w，匹配单个单词字符（匹配字母或数字或下划线或汉字等），w 是 word 的缩写，就是字母 a-z，数字 0-9，不包括逗号、句号、加减乘除号、括号等。
\s，匹配单个空白字符（即匹配任意的空白符，包括空格，制表符(Tab)，换行符，中文全角空格等），s 是 space 的缩写，就是空白的意思。
\n，匹配换行符，n 是 newline 的缩写，中文就是换行。
\r，匹配回车符，r 就是 return 的缩写，回车在这里就是它的中文意思。
\t，匹配制表符，就是 tab 键打出来的一串用以缩进的空白字符，tab 是 tabel 的缩写，table 就有表格和制表的意思。
\b，匹配单词边界（单词的开头或结尾，也就是单词的分界处，b 是 boundary 的缩写，中文就是边界的意思。）
* 匹配任意数量的字符
. 匹配除了换行之外的所有字符
^ 匹配字符串的开始
$ 匹配字符串的结束

如你所见，所谓的元字符，就是反斜杠加单词缩写，来表征某个字符类型以及功能性的匹配符号。这就是它们的设计原则。

2.量词

元字符大多只能表示单个字符的类型。·

我们还需要量词，以表示「有，有0到多个，有至少一个，有n个以上，有n到m个，以某个字符开头，以某个字符结尾等」。

这时你可以停下来，稍作思考，让你来设计，你会设计成什么样？

Javascript的设计如下：

n+，至少1个 n 类型的字符
n*，0到多个 n 类型的字符
n?，0 或 1 个 n 类型的字符
n{X}，X 个 n 类型的字符
n{X,Y}，X 到 Y 个 n 类型的字符
n{X,}，至少 X 个 n 类型的字符
n$，以 n 类型的字符结尾
^n，以 n 类型的字符开头

如你所见，大致是一些类似数学里表达区间的意思。

3.表达式

你可以戏谑地说它是「元表达式」。·

其实，它们也是描述范围的，只是不是所有范围都是关于某个字符类型n 的数量和出现位置，有些范围跟多个字符组成的集合有关。

比如，在这几个字符类型之内，在这几个字符类型之外的，便利地表示 26 个字母，便利地表示 10 个数字字符。

Javascript的设计如下：

[abc]，匹配单个字符，它是abc的集合的元素
[^abc]，匹配单个字符，它不是abc的集合的元素
[0-9]，匹配单个字符，它是从0到9这个集合的元素
[a-z]，匹配单个字符，它是26 字母这个集合的元素
(red|blue|green)，匹配多个连续字符，它是 red blue green 这三个词的集合的元素

4.字符转义

查找元字符本身的话，比如你查找.,或者*,就出现了问题：你没办法指定它们，因为它们会被解释成别的意思。这时你就得使用\来取消这些字符的特殊意义。因此，你应该使用\.和\*。当然，要查找\本身，你也得用\\

5.字符类

[ ] 集合查找 ,比如 [abcde] 表示匹配里面包含的字符 , 常见的[0-9]和\d等价, 即匹配一位数字, [a-z0-9A-Z_]也完全等同于\w（如果只考虑英文的话）
\(?0\d{2}[) -]?\d{8}首先是一个转义字符\(,它能出现0次或1次?,然后是一个0，后面跟着2个数字\d{2}，然后是)或-或空格中的一个，它出现0次或1次?，最后是8个数字\d{8}

6.分支条件

上面那个表达式也能匹配010)12345678或(022-87654321这样的“不正确”的格式。
正则表达式里的分枝条件指的是有几种规则，如果满足其中任意一种规则都应该当成匹配，具体方法是用|把不同的规则分隔开。
0\d{2}-\d{8}|0\d{3}-\d{7}表示0开头接两位数字,-后面连着8位数的电话号码,比如020-12345678 或者 0开头接三位数字,-后面连着7位数的电话号码,比如0751-1234567
使用分枝条件时，要注意各个条件的顺序。原因是匹配分枝条件时，将会从左到右地测试每个条件，如果满足了某个分枝的话，就不会去再管其它的条件了。

7.分组

如果想要重复多个字符又,你可以用小括号来指定子表达式(也叫做分组)
(\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式，请按下列顺序分析它：\d{1,3}匹配1到3位的数字，(\d{1,3}\.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次，最后再加上一个一到三位的数字(\d{1,3})。
正则表达式中并不提供关于数学的任何功能，所以只能使用冗长的分组，选择，字符类来描述一个正确的IP地址：((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)

8.反义

有时需要查找不属于某个能简单定义的字符类的字符。比如想查找除了数字以外，其它任意字符都行的情况，这时需要用到反义：·

符号	表示
\W	匹配任意不是字母，数字，下划线，汉字的字符
\S	匹配任意不是空白符的字符
\D	匹配任意非数字的字符
\B	匹配不是单词开头或结束的位置
[ ^x ]	匹配除了x以外的任意字符
[ ^aeiou ]	匹配除了aeiou这几个字母以外的任意字符

例子：
\S+匹配不包含空白符的字符串。
<a[^>]+>匹配用尖括号括起来的以a开头的字符串

注意：

和元字符中的\w \s \d \b相比，反义这四个使用的是大写。

9.贪婪与懒惰

当正则表达式中包含能接受重复的限定符时，通常的行为是（在使整个表达式能得到匹配的前提下）匹配尽可能多的字符。以这个表达式为例：a.*b，它将会匹配最长的以a开始，以b结束的字符串。如果用它来搜索aabab的话，它会匹配整个字符串aabab。这被称为贪婪匹配。

有时，我们更需要懒惰匹配，也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式，只要在它后面加上一个问号?。这样.*?就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。
a.*?b匹配最短的，以a开始，以b结束的字符串。如果把它应用于aabab的话，它会匹配aab（第一到第三个字符）和ab（第四到第五个字符）
为什么第一个匹配是aab（第一到第三个字符）而不是ab（第二到第三个字符）？简单地说，因为正则表达式有另一条规则，比懒惰／贪婪规则的优先级更高：最先开始的匹配拥有最高的优先权·

符号	表示
*?	重复任意次，但尽可能少重复
+?	重复1次或更多次，但尽可能少重复
??	重复0次或1次，但尽可能少重复
{n,m}?	重复n到m次，但尽可能少重复
{n,}?	重复n次以上，但尽可能少重复

3.JS中正则表达式的常用对象方法

1）test：返回一个Boolean值，判断指定的字符串中是否存在模式，存在返回true，否则返回false；

2）match:找到一个或多个正则表达式的匹配；

3）replace：替换与正则表达式匹配的子串；

4）search：检索与正则表达式匹配的值。

5) exec:用正则表达式在字符串中查找，并返回数组。

4.语法例子

1、简单匹配

        var str = "They love us,we are happy!";        
        var reg = new RegExp("we");        
        alert(reg.test(str));  //返回true,只要字符串中含有we即可复制代码

2、i 表示忽略大小写

        // i表示忽略大小写        
        var str = "They love us,we are happy!";        
        var reg = new RegExp("We");        
        alert(reg.test(str));  //返回false         
        
        var reg = new RegExp("We","i"); //第二个参数i表示不区分大小写        
        alert(reg.test(str));  //返回true复制代码

3、^ 表示字符开始位置，$表示字符结尾位置

        var str = "They love us,we are happy!";        
        var reg = new RegExp("^we");        
        alert(reg.test(str));  //返回false,因为we不在开始位置         

        var reg = new RegExp("^The");        
        alert(reg.test(str));  //返回true复制代码

        var str = "They love us,we are happy!";        
        var reg = new RegExp("^The$");        
        alert(reg.test(str));  //返回false,因为The虽然在开头，但不在末尾。         

        var str = "They love us,we are happy!";        
        var reg = new RegExp("happy!$");        
        alert(reg.test(str));  //返回true复制代码

4、\s表示匹配任何空白字符，包括空格、制表符、换页符等；

\d表示0-9任意一个数字；

\w表示任意一个字母、数字和下划线；

\. 小数点可以匹配除了换行符（/n）以为的其他任意字符；

+表示字符至少要出现一次

    var str = "su 8";    
    var re = /^[a-z]+\s\d+/;    
    alert(re.test(str)); //返回true复制代码

    var array = re.exec(str);    
    alert(array[0]); //数组的第一个元素为完整的匹配内容复制代码

5、[ ]表示匹配指定范围内任意字符

        var str = "we are family";         
        var reg = new RegExp("[a-z]");        
        alert(reg.test(str));  //返回true         

        var str = "123we are family";        
        var reg = new RegExp("^[a-z]"); //以字母开头        
        alert(reg.test(str));  //返回false复制代码

6、用（）来创建子匹配

    var str = "jQuery 1.11";  //下面获取主版本号1和次版本号11
    var re = /\d+\.+\d+/;
    var array = re.exec(str); //这种方法只能获得1.11
    alert(array[0]); //数组的第一个元素为完整的匹配内容
 
    var re = /(\d+)\.+(\d+)/;  //利用括号创建子元素
    var array = re.exec(str); 
    alert(array[0]); //完整的匹配字符串1.11
    alert(array[1]);//第一个子元素1
    alert(array[2]); //第二个子元素11
复制代码

5.正则表达式在前端中的业务应用场景（JS实现）

1..Javascript表单验证email，判断一个输入量是否为邮箱Email，通过正则表达式实现

//检查email邮箱
function isEmail(str){
       var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
       return reg.test(str);
}复制代码

2.JavaScript表单验证中文大写字母JavaScript表单验证中文大写字母，判断一个输入量是否为中文或大写的英文字母，通过正则表达式实现。

// 检查是否为有效的真实姓名，只能含有中文或大写的英文字母
function isValidTrueName(strName){
      var str = Trim(strName);   //判断是否为全英文大写或全中文，可以包含空格
      var reg = /^[A-Z u4E00-u9FA5]+$/;
      if(reg.test(str)){
       return false;
      }
      return true;复制代码

3.JavaScript表单验证是否为中文，判断一个输入量是否为中文，通过正则表达式实现。

// 检查是否为中文
function isChn(str){
      var reg = /^[u4E00-u9FA5]+$/;
      if(!reg.test(str)){
       return false;
      }
      return true;
}复制代码

4.JavaScript正则比较两个字符串，就是利用正则表达式快速比较两个字符串的不同字符。

<script language="JavaScript">
var str1 = "求一个比较字符串处理功能";
var str2 = "求两或三个比较字符串处理";
var re = new RegExp("(?=.*?)[^" + str1 +"](?=.*?)|(?=.*?)[^" + str2 + "](?=.*?)", "g");
var arr;
while ((arr = re.exec(str1 + str2)) != null)
{
   document.write(arr);
}
</script>复制代码

5.JavaScript表单验证密码

JavaScript表单验证密码是检查输入框是否为有效的密码，
密码只允许由ascii组成，
此函数只在修改或注册密码时使用。
也就是说一切不是ascii组成的字符串都不能通过验证。
具体函数checkValidPasswd请看下面的演示代码function checkValidPasswd(str){

var reg = /^[x00-x7f]+$/;
      if (! reg.test(str)){
       return false;
      }
      if (str.length < 6 || str.length > 16){
       return false;
      }
      return true;
}复制代码

6.JavaScript检查是否为整数

JavaScript正则验证检查输入对象的值是否符合整数格式
输入量是str 输入的字符串
如果输入量字符串str通过验证返回true,否则返回false

function isInteger( str ){
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}复制代码

7.JavaScript正则验证是否为空

JavaScript正则验证字符串是否为空
用途：检查输入字符串是否为空或者全部都是空格
输入量是一个字符串：str
返回：如果输入量全是空返回true,否则返回false

function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}复制代码

8.通过正则去判断获得是是否是IP地址的格式，然后返回相应的结果

JavaScript正则验证IP，用途：校验ip地址的格式
输入：strIP：ip地址
返回：如果JavaScript通过验证IP返回true,否则返回false；

function isIP(strIP) {
if (isNull(strIP)) return false;
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式
if(re.test(strIP))
{
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
}
return false;
}复制代码

9.JavaScript表单验证自定义内容

JavaScript表单验证自定义内容，这个比较好，可以自由定制输入项的内容来用JavaScript进行验证，下面demo中是表单项只能为数字和"_"，同样您可以进行扩展来达到您想要的目的。用于电话/银行帐号验证上,可扩展到域名注册等

<script  language="javascript">
<!--
function  isNumber(String)
{  
var  Letters  =  "1234567890-";  //可以自己增加可输入值
var  i;
var  c;
if(String.charAt(  0  )=='-')
return  false;
if(  String.charAt(  String.length  -  1  )  ==  '-'  )
return  false;
for(  i  =  0;  i  <  String.length;  i  ++  )
{  
c  =  String.charAt(  i  );
if  (Letters.indexOf(  c  )  <  0)
return  false;
}
return  true;
}
function  CheckForm()
{  
if(!  isNumber(document.form.TEL.value))  {  
alert("您的电话号码不合法！");
document.form.TEL.focus();
return  false;
}
return  true;
}
-->
</script>
JavaScript验证表单项不能为空
JavaScript验证表单项不能为空，这个可是很常用的哦，比如在验证表单里面的用户名不能为空等等，代码如下
<script  language="javascript">
<!--
function  CheckForm()
{  
if  (document.form.name.value.length  ==  0)  {  
alert("请输入您姓名!");
document.form.name.focus();
return  false;
}
return  true;
}
-->
</script>
JavaScript其他屏蔽
google_ad_client = "pub-2681618127469348"; google_ad_slot = "7207323897"; google_ad_width = 300; google_ad_height = 250; // google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
复制代码

10.JavaScript屏蔽F5键
代码如下

<script language="javascript">
<!--
function document.onkeydown()  
{  
    if ( event.keyCode==116)  
    {  
        event.keyCode = 0;  
        event.cancelBubble = true;  
        return false;  
    }
}
-->
</script>

复制代码