javascript(自我总结的正则表达式入门)

1、术语含义:RegExp 对象表示正则表达式,是对字符串执行模式匹配的强大工具。(俗称鸟语); 2、作用:正则表达式常用于字符串处理、表单验证(邮箱验证、用

1、术语含义:RegExp 对象表示正则表达式,是对字符串执行模式匹配的强大工具。(俗称鸟语);

2、作用:正则表达式常用于字符串处理、表单验证(邮箱验证、用户名验证、密码验证以及密码强度验证、昵称验证)等。

3、语法规则:分别是直接量语法RegExp 对象的语法

  • 直接量语法:/pattern/attributes(/正则/正则属性)。ps:pattern参数是一个字符串,指定了正则表达式的模式或其他正则表达式(就是自己设定的正则表达式);attributes参数是一个可选的字符串,包含属性 "g""i""m",分别用于指定全局匹配执行对大小写不敏感的匹配多行匹配
/*直接量语法*/
var re=/[0-9]/g;/正则表达式/可选的正则属性(g/i/m)
  • RegExp 对象的语法:new RegExp(pattern, attributes);{如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。}
/*如果你需要字符串连接的时候必须用对象的方式写*/
var re=new RegExp("-");

4.正则表达式的常用字符

修饰符

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

 

 

 

 

<script type="text/javascript">
var str="123"
var re=/\d/g;/*g:全局匹配*/
alert(str.match(re));/*返回[1,2,3]这个数组*/
</script>
<script type="text/javascript">
    var str="asdasAAAA"
    var re=/[a-z]/gi;/*gi:全局不区分大小写匹配*/
    alert(str.match(re));/*返回数组[a,s,d,a,s,A,A,A,A]*/
</script>

 

 方括号方括号用于查找某个范围内的字符:

表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。

 

 

 

 

 

 

 

 

 

元符号(元字符(Metacharacter)是拥有特殊含义的字符):

元字符 描述
. 查找单个字符,除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B  匹配非单词边界。
\0 查找 NUL 字符。
\n  查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。



 

 

 

 

 

 

 

 

 

 

 

 

 

 

量词

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。 
^n 匹配任何开头为 n 的字符串。 
?=n 匹配任何其后紧接指定字符串 n 的字符串。 
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。 

 

 

 

 

 

 

 

 

 

5、支持正则表达式的 String 对象的方法(将正则表达式对象作为参数)

search():检索与正则表达式相匹配的值,并且总是从字符串的开始进行检索,这意味着它总是返回 stringObject 的第一个匹配的位置

{语法:stringObject.search(regexp);ps:search() 方法不执行全局匹配。}

<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/W3School/))
/*输出6*/
</script>
<script type="text/javascript">
    var str="Visit W3School!"
    document.write(str.search(/w3school/))
    /*输出-1,因为方法search()对大小敏感,所以匹配是不了,返回-1*/
</script>

match(): match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配(返回值是存放匹配结果的数组)。

{

PS:match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

(1).如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。

(2).如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。

}

{语法:(1)stringObject.match(searchvalue);(2)stringObject.match(regexp);}

<script type="text/javascript">
    var str="1 plus 2 equal 3"
    document.write(str.match(/\d+/g));
    /*输出1,2,3。(全局匹配字符串的数字)数组类型*/
    var str="1 plus 2 equal 3"
    document.write(str.match(/\d+/));
    /*输出1(只匹配一次字符串的数字)。数组类型*/
</script>

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

{

语法:stringObject.replace(regexp/substr,replacement);

参数regexp/substr:必需。规定子字符串或要替换的模式的 RegExp 对象。

参数replacement:必需,replacement可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换;如果它是函数,在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。

}

<script type="text/javascript">
  /*当参数replacement作为字符串,如下:*/ var str="fasdd+dddsww*(*()*"; var re=/\+/;/*转义*/ document.write(str.replace(re,"\n"));/*将'+'号替换换行符'\n'*/ /*当参数replacement作为函数,如下:*/ var str1="fasdd+d<br/>sw<a href="###">w*(</a>*()*"; var re1=/<[^<>]+>/g; document.write(str1.replace(re1,function(s){/*参数s的re1正则匹配的结果*/ var re=/<br\s*\/?>/i; if (re.test(s)){ return "\n";/*把第一个<br/>替换成\n*/ }else{ return ""; } })); </script>

 6常用RegExp 对象方法

test():test() 方法用于检测一个字符串是否匹配某个模式。

 {语法:RegExpObject.test(string);参数string:必需,要检测的字符串。}

<script type="text/javascript">
    var str = "Visit W3School";
    var patt1 = new RegExp("W3School");
    var result = patt1.test(str);
    /*如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回true,否则返回 false。*/
    document.write("Result: " + result);
</script>

例子:(1)密码强度验证之search()方法

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码强度验证之search()方法</title>
<script type="text/javascript">
window.onload=function (){ /*密码强度验证之search()方法*/ var re1=/[0-9]/; var re2=/[a-z]/; var re3=/[A-Z]/; var re4=/[^\w]/; var arr=[re1,re2,re3,re4]; var num=0; var text=document.getElementById("text"); text.onkeyup=function(){ var textval=text.value; num=0; for (var i = 0; i < arr.length; i++) { if (textval.search(arr[i])!=-1&&textval.length>4) { num++; }; }; if (num==4) {alert("强");return;} if (num==3) {alert("较强");return;} if (num==2) {alert("中");return;} if (num==1) {alert("弱");return;}
}
}
<script /> </head> <body> <input type="text" id="text"/> </body> </html>

 (2)、正则验证昵称

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//昵称:最少不能少于4位,最大不能大于24位
//输入的内容是不受限
//英文字符:占1位
//中文字符:占2位
window.onload=function (){
    var oTxt=document.getElementById("txt1");
    var oBtn=document.getElementById("btn1");
    oBtn.onclick=function (){
        var oTxtValue=oTxt.value;
        var re=/[\u4e00-\u9fa5]/g;
        var arr=oTxtValue.match(re);
        if (re.test(oTxtValue)){
            //12的撒
            //4+2=6
            var maxLength=oTxtValue.length+arr.length;
        }else{
            var maxLength=oTxtValue.length;
        }
        if (maxLength>12||maxLength<4){
            alert("错误");
        }
        else{
            alert("正确");
        }
    }
}
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="button" value="验证" id="btn1">
</body>
</html>

(3)、验证邮箱

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
    //XXXXXXXXX@qq.com   tangcaiye@gmail.com
    //XXXXXXXXXX@bokanedu.com
    //XXXXXXXXX@163.com
    //XXXXXXXXXXX@163.com.org.xx.aa
    //数字、字母、_  @  数字、小写字母{2,8} (.小写字母){1,4} 
    //^\w+@[0-9a-z]{2,8}(\.[a-z]{2,4}){1,4}$
    window.onload=function (){
        var oTxt=document.getElementById("txt1");
        var oBtn=document.getElementById("btn1");
        oBtn.onclick=function (){
         var oTxtVlaue=oTxt.value;
               var re=/^\w+@[0-9a-z]{2,8}(\.[a-z]{2,4}){1,4}$/;
            if (re.test(oTxtVlaue)){
                alert("正确");
            }else{
                alert("错误");
            }
        }
    }
</script>
</head>
<body>
    <input type="text" id="txt1">
    <input type="button" value="验证" id="btn1">
</body>
</html>

 

 

 

您可能有感兴趣的文章
AJAX技术框架及开发工具

推荐15个最好用的JavaScript代码压缩工具

基于nodejs的雪碧图制作工具的示例代码

浅谈Node 调试工具入门好代码教程

9种使用Chrome Firefox 自带调试工具调试javascript技巧