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

2022-04-18 18:48:15

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>

javascript(自我总结的正则表达式入门),布布扣,bubuko.com

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

码农公寓

相关文章