JS裡最基礎的正規表示式使用詳解
- php中世界最好的语言原創
- 2018-03-30 14:15:211602瀏覽
這次帶給大家JS裡最基礎的正規表示式使用詳解，在JS裡使用基礎正規表示式的注意事項有哪些，以下就是實戰案例，一起來看一下。
正規表示式是個很屌的東東，今天在這裡只是簡單的給剛接觸JS的人普及一下，裡面若有爭議的地方歡迎大家留言！
1.1 什麼是正規表示式
正規表示式(regular expression)是一個描述字元模式的對象，ECMAScript的RegExp 類別表示正規表示式，而String和RegExp都定義了使用正規表示式進行強大的模式匹配和文字擷取與替換的函數。
正規表示式用於對字串模式匹配及檢索替換，是對字串執行模式匹配的強大工具。
1.2 正規表示式的作用
正規表示式主要用來驗證客戶端的輸入資料。
使用者填寫完表單點選按鈕之後，表單就會被傳送到伺服器，在伺服器端通常會用PHP、ASP.NET、JSP等伺服器腳本對其進行進一步處理。因為客戶端驗證，可以節約大量的伺服器端的系統資源，並且提供更好的使用者體驗。
二、建立正規表示式==(123)==
#要使用正規表示式，必須先建立正規則表達式物件，有2種建立物件的方式：
2.1 方式1：使用關鍵字new建立
var patt = new RegExp(pattern,modifiers);
參數1：正規表達式的模式。字串形式
參數2：模式修飾符。用於指定全域匹配、區分大小寫的匹配和多行匹配
<script type="text/javascript">
/*
创建了一个正则表达式
参数1：模式是：girl，意思是说可以匹配 "girl"这样的字符串
参数2：模式修饰符：gi g代表全局匹配 i代表不区分大小写
*/
var pa = new RegExp("girl", "gi");
//测试参数中的字符串"你好我的girl" 是否与匹配模式匹配。
var isExist = pa.test("你好我的girl"); // 在本例中，是匹配的，这个字符串包含girl，所以返回true
alert(isExist); //true
</script>
2.2 方式2：使用正規表示式直接量
var pa = /pattern/modifiers;
兩個/中間的表示正規表示式的模式，最後一個/的後面是模式修飾符
例如：上面的例子可以這樣寫var pa = /girl/gi;
注意：這個時候模式和模式修飾符都能再增加雙引號或單引號
<script type="text/javascript">
var pa = /girl/gi;
alert(pa.test("厉害了我的girl")); //true
</script>
三、正規表示式模式修飾符==(126)==
JavaScript中共有3種模式修飾符：g i u
g：表示全域。意思是說會對一個字串進行多次匹配。如果不寫g則只匹配一次，一旦匹配成功，則不會再次匹配
i：表示忽略大小寫。意思是說在匹配的時候不區分大小寫
u：表示可以多行匹配。
四、正規表示式方法詳解==(127)==
常用到的正規表示式方法有兩個test() 和exec()
4.1 test()方法
##test(字串)- 參數：要匹配的字串
- 返回值：匹配成功返回true，失敗返回false
<script type="text/javascript">
var pa = /girl/gi;
if(pa.test("厉害了我的girl")){
alert("这个女孩和你很配");
}else {
alert("你注定没有女孩去匹配");
}
</script>
4.2 exec()方法
exec(字串)：此方法為專門為擷取群組而設計的- #參數：要匹配的字串
- 傳回值：傳回的是一個陣列。如果不符合則傳回null
- 關於傳回值數組的說明：
- 它確實是Array的實例。
- 但這個陣列有兩個額外的屬性：index和input
- #index：表示符合的字串在來源字串中的索引
- input：表示符合的來源字串。
数组的第一项目是与整个模式匹配的字符串，其他项是与模式中捕获组匹配的字符串
如果没有捕获组，则数组中只有第一项。关于捕获组的概念以后再说
<script type="text/javascript"> var pa = /girl/gi; var testStr = "myGirl, yourgirl, hisgIrl"; var girls = pa.exec(testStr); //捕获 alert(girls.length + ":" + (girls instanceof Array)); //正则表达式没有捕获组，所以数组长度为1 alert(girls[0]); //第一次捕获的是 Girl //因为我们是用的全局匹配，所以此次匹配的时候从上次匹后的位置开始继续匹配 alert(pa.exec(testStr)[0]); // girl alert(pa.exec(testStr)); // gIrl alert(pa.exec(testStr)); //继续向后没有匹配的字符串，所以返回null // 返回null，如果继续再匹配，则会回到字符串的开始，重写开始匹配。 alert(pa.exec(testStr)); // Girl // ...开启新一轮匹配 </script>
所以我们如果想找到全部匹配的字符串可以时候用循环，结束条件就是匹配结果为null
<script type="text/javascript">
var pa = /girl/gi;
var testStr = "myGirl, yourgirl, hisgIrl";
var girls;
while(girls = pa.exec(testStr)){ //如果等于null,会自动转成 false，结束。
alert(girls);
}
</script>
分组。在正则表达式中用()括起来任务是一组。组可以嵌套。
<script type="text/javascript">
//()内的内容就是第1组(Girl)，其实我们完整真个表达式可以看出第0组 girl(Girl)
// 将来对应着匹配结果数组的下标。
var pa = /girl(Girl)/gi;
var test = "girlGirl abdfjla Girlgirl fal girl";
var girls;
while(girls = pa.exec(test)){
//匹配之后，数组的第0个元素对应的这第0组的匹配结果，第1个元素对应着第1组的匹配结果
for (var i = 0; i < girls.length; i++) {
console.log(girls[i]);
}
console.log("-------------");
}
</script>
//最终运行结果：
girlGirl
Girl
-------------
Girlgirl
girl
------------
五、正则表达式规则==(124)==
表达式规则
正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能，可以控制匹配模式的
方式。反斜杠后的元字符将失去其特殊含义。
字符类：单个字符和数字
[0-9A-Za-z]
元字符/元符号 匹配情况
. 匹配除换行符外的任意字符
[a-z0-9] 匹配括号中的字符集中的任意字符
[^a-z0-9] 匹配任意不在括号中的字符集中的字符
\d ==[0-9] 匹配数字
\D ==[^0-9] 匹配非数字，同[^0-9]相同
\w [0-9A-Za-z_] 匹配字母和数字及_
\W 匹配非(字母和数字及_)
字符类：空白字符
元字符/元符号 匹配情况
\0 匹配null 字符
\b 匹配空格字符
\n 匹配换行符
\r 匹配回车字符
\t 匹配制表符
\s 匹配空白字符、空格、制表符和换行符
\S 匹配非空白字符
字符类：锚字符
元字符/元符号 匹配情况
^ 行首匹配
$ 行尾匹配
字符类：重复字符
元字符/元符号 匹配情况
? 例如（x?） 匹配0个或1 个x
* 例如（x*） 匹配0个或任意多个x
+ 例如（x+） 匹配至少一个x
(xyz)+ 匹配至少一个(xyz)
{m,n} 例如x{m,n} n>=次数>=m 匹配最少m个、最多n个x
{n} 匹配前一项n次
{n,} 匹配前一项n次，或者多次
六、常用正则表示==(128)==
1、检查邮政编码
var pattern = /[1-9][0-9]{5}/; //共6位数字，第一位不能为0
var str = '224000';
alert(pattern.test(str));
2、检查文件压缩包
var pattern = /[\w]+\.zip|rar|gz/; //\w 表示所有数字和字母加下划线 var str = '123.zip'; //\.表示匹配.，后面是一个选择 alert(pattern.test(str));
3、删除多余空格
var pattern = /\s/g; //g 必须全局，才能全部匹配
var reg=new RegExp('\\s+','g');
var str = '111 222 333';
var result = str.replace(pattern,''); //把空格匹配成无空格
alert(result);
4、删除空格
var pattern = /^\s+/;
var str = ' goo gle ';
alert(str+" "+str.length);
var result = str.replace(pattern, '');
alert(result+" "+result.length);
pattern = /\s+$/;
result = result.replace(pattern, '');
alert(result+" "+result.length);
pattern = /\s+/g;
result = result.replace(pattern, '');
alert(result+" "+result.length);
5、简单的电子邮件验证
var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));
var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));
七、支持正则表达式的字符串方法
| 方法 | 描述 |
|---|---|
| search | 检索与正则表达式相匹配的第一个匹配项的索引。 |
| match | 找到一个或多个正则表达式的匹配。 |
| replace | 替换与正则表达式匹配的子串。 |
| split | 把字符串分割为字符串数组。 |
<script type="text/javascript"> var s = "Abc123aBc"; alert(s.search(/abc/gi)); alert(s.search(/abc/gi)); // 即使设置的全局模式，每次search也是从开始向后查找 //match方法和正则表达式的exec()方法的作用是一样的，但是match会一次性把所有的匹配放在一个数组中，全部返回 alert(s.match(/abc/gi)); // Abc,aBc alert(s.replace(/[ab]/gi, "x")); //把a或b替换成x var ss = s.split(/[0-9]+/gi); //用1个或多个数字切割。 Abc,aBc alert(ss); </script>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是JS裡最基礎的正規表示式使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！