JS裡最基礎的正規表示式使用詳解

php中世界最好的语言
發布: 2018-03-30 14:15:21
原創
1477 人瀏覽過

這次帶給大家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:模式修飾符。用於指定全域匹配、區分大小寫的匹配和多行匹配

登入後複製

2.2 方式2:使用正規表示式直接量

var pa = /pattern/modifiers;
登入後複製

兩個/中間的表示正規表示式的模式,最後一個/的後面是模式修飾符

例如:上面的例子可以這樣寫var pa = /girl/gi;

注意:這個時候模式和模式修飾符都能再增加雙引號或單引號

登入後複製

三、正規表示式模式修飾符==(126)==

JavaScript中共有3種模式修飾符:g i u

  1. g:表示全域。意思是說會對一個字串進行多次匹配。如果不寫g則只匹配一次,一旦匹配成功,則不會再次匹配

  2. i:表示忽略大小寫。意思是說在匹配的時候不區分大小寫

  3. u:表示可以多行匹配。

四、正規表示式方法詳解==(127)==

常用到的正規表示式方法有兩個test() 和exec()

4.1 test()方法

##test(字串)

  • 參數:要匹配的字串

  • 返回值:匹配成功返回true,失敗返回false

在只想知道目標字符串與某個模式是否匹配,但不需要知道其文字內容的情況下,使用此方法非常方便。因此, test() 方法常被用在 if 語句中。

登入後複製

4.2 exec()方法

exec(字串):此方法為專門為擷取群組而設計的

  • #參數:要匹配的字串

  • 傳回值:傳回的是一個陣列。如果不符合則傳回null

  • 關於傳回值數組的說明:

  • 它確實是Array的實例。

  • 但這個陣列有兩個額外的屬性:index和input

  • #index:表示符合的字串在來源字串中的索引

  • input:表示符合的來源字串。

  • 数组的第一项目是与整个模式匹配的字符串,其他项是与模式中捕获组匹配的字符串

  • 如果没有捕获组,则数组中只有第一项。关于捕获组的概念以后再说

登入後複製

所以我们如果想找到全部匹配的字符串可以时候用循环,结束条件就是匹配结果为null

登入後複製

分组。在正则表达式中用()括起来任务是一组。组可以嵌套。

 //最终运行结果: 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 把字符串分割为字符串数组。
登入後複製

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

正则表达式的{n,m}量词如何使用

正则表达式小结(实战归纳)

以上是JS裡最基礎的正規表示式使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!