首頁 > web前端 > js教程 > JS正規的使用及基本語法

JS正規的使用及基本語法

php中世界最好的语言
發布: 2018-03-29 11:19:07
原創
1309 人瀏覽過

這次帶給大家JS正規的使用及基本語法,使用JS正規的使用及基本語法注意事項有哪些,以下就是實戰案例,一起來看一下。

前面的話

  正規表示式在人們的印像中可能是一堆無法理解的字符,但就是這些符號卻實現了字串的高效操作。通常的情況是,問題本身並不複雜,但沒有正規表示式就成了大問題。 javascript中的正規表示式作為相當重要的知識,本文將介紹正規表示式的基礎語法

#定義

  正規表示式( Regular Expression)是一門簡單語言的語法規範,是強大、便捷、高效的文字處理工具,它應用在一些方法中,對字串中的信息實現查找、替換和提取操作

  javascript中的正規表示式以RegExp物件表示,有兩種寫法:一種是字面量寫法;​​另一種是建構函數寫法

正規表示式用來處理字串特別好用,在JavaScript中能用到正規表示式的地方有很多,本文對正規表示式基礎知識和Javascript中正規表示式的使用做一個總結。

第一部分簡單列舉了正規表示式在JavaScript中的使用場景;第二部分詳細介紹正規表示式的基礎知識,寫出一些範例方便理解。

本文的內容是我自己看完正規表示式寫法,和犀牛書中js正規表示式的章節後的總結,所以內容可能會有疏漏和不嚴謹的地方。若有大神經過發現文中錯誤的地方,歡迎斧正!

Javascript中正規表示式的使用

#一個正規表示式可以認為是對一種字元片段的特徵描述,而它的作用就是從一堆字串中找出滿足條件的子字串。例如我在JavaScript中定義一個正規表示式:

var reg=/hello/  或者 var reg=new RegExp("hello")
登入後複製

那麼這個正規表示式可以用來從一堆字串中找出 hello 這個單字。而「找出」這個動作,結果可能是找出第一個hello的位置、用別的字串替換hello、找出所有hello等等。以下就列舉JavaScript中可以使用正規表示式的函數,簡單介紹一下這些函數的作用,更複雜的用法會在第二部分介紹。

String.prototype.search方法

用來找出原始字串中某個子字串首次出現的index,沒有則回傳-1

"abchello".search(/hello/); // 3
登入後複製

String.prototype.replace方法

#用來取代字串中的子字串

"abchello".replace(/hello/,"hi");  // "abchi"
登入後複製

String.prototype.split方法

##用來分割字串

"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]
登入後複製

String.prototype.match方法

用來捕捉字串中的子字串到一個陣列中。預設只捕獲一個結果到數組中,正則表達式有”全域捕獲“的屬性時(定義正則表達式的時候添加參數g),會捕獲所有結果到數組中

"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
登入後複製

作為match參數的正規表示式在是否擁有全域屬性的情況下,match方法的表現還不一樣,這一點會在後邊的正規表示式分組中講到。

RegExp.prototype.test方法

用來測試字串中是否含有子字串

/hello/.test("abchello"); // true
登入後複製

RegExp.prototype.exec方法

###和字串的match方法類似,這個方法也是從字串中捕獲滿足條件的字串到陣列中,但是也有兩個差異。 ######1. exec方法一次只能擷取一份子字串到陣列中,無論正規表示式是否有全域屬性###
var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");  // ["hello"]
登入後複製
###2. ###正規表示式物件###(也就是JavaScript中的RegExp物件)有一個lastIndex屬性,用來表示下次從哪個位置開始捕獲,每一次執行exec方法後,lastIndex就會往後推,直到找不到匹配的字元返回null,然後又從頭開始捕捉。 這個屬性可以用來遍歷捕捉字串中的子字串。 ###
var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0
登入後複製

正则表达式基础

元字符

 上面第一节以/hello/为例,但是实际应用中可能会遇到这样的需求: 匹配一串不确定的数字、匹配开始的位置、匹配结束的位置、匹配空白符。此时就可以用到元字符。

元字符:

//匹配数字: \d
"ad3ad2ad".match(/\d/g); // ["3", "2"]
//匹配除换行符以外的任意字符: .
"a\nb\rc".match(/./g); // ["a", "b", "c"]
//匹配字母或数字或下划线 : \w
"a5_ 汉字@!-=".match(/\w/g); // ["a", "5", "_"]
//匹配空白符:\s
"\n \r".match(/\s/g); //[" ", " ", ""] 第一个结果是\n,最后一个结果是\r
//匹配【单词开始或结束】的位置 : \b
"how are you".match(/\b\w/g); //["h", "a", "y"] 
// 匹配【字符串开始和结束】的位置: 开始 ^ 结束 $
"how are you".match(/^\w/g); // ["h"]
登入後複製

反义元字符,写法就是把上面的小写字母变成大写的,比如 , 匹配所有不是数字的字符: \D

另外还有一些用来表示重复的元字符,会在下面的内容中介绍。

字符范围

在 [] 中使用符号 -  ,可以用来表示字符范围。如:

// 匹配字母 a-z 之间所有字母
/[a-z]/
// 匹配Unicode中 数字 0 到 字母 z 之间的所有字符
/[0-z]/ 
// unicode编码查询地址:
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根据上面的内容,我们可以找出汉字的Unicode编码范围是 \u4E00 到 \u9FA5,所以我们可以写一个正则表达式来判断一个字符串中是否有汉字
/[\u4E00-\u9FA5]/.test("测试"); // true
登入後複製

重复 & 贪婪与懒惰

首先来讲重复,当我们希望匹配一些重复的字符时,就需要用到一些和重复相关的正则表达式,写法如下

//重复n次 {n}
"test12".match(/test\d{3}/); // null
"test123".match(/test\d{3}/); // ["test123"]
//重复n次或更多次 {n,}
"test123".match(/test\d{3,}/); // ["test123"]
//重复n到m次
"test12".match(/test\d{3,5}/); // null
"test12345".match(/test\d{3,5}/); // ["test12345"]
"test12345678".match(/test\d{3,5}/); // ["test12345"]
// 匹配字符test后边跟着数字,数字重复0次或多次
"test".match(/test\d*/); // ["test"]
"test123".match(/test\d*/); // ["test123"]
//重复一次或多次
"test".match(/test\d+/) ; // null
"test1".match(/test\d*/); //["test1"]
//重复一次或0次
"test".match(/test\d?/) ; // null
"test1".match(/test\d?/); //["test1"]
登入後複製

从上面的结果可以看到,字符test后边跟着的数字可以重复0次或多次时,正则表达式捕获的子字符串会返回尽量多的数字,比如/test\d*/匹配 test123 ,返回的是test123,而不是test或者test12。

正则表达式捕获字符串时,在满足条件的情况下捕获尽可能多的字符串,这就是所谓的“贪婪模式”。

对应的”懒惰模式“,就是在满足条件的情况下捕获尽可能少的字符串,使用懒惰模式的方法,就是在字符重复标识后面加上一个 "?",写法如下

// 数字重复3~5次,满足条件的情况下返回尽可能少的数字
"test12345".match(/test\d{3,5}?/); //["test123"]
// 数字重复1次或更多,满足条件的情况下只返回一个数字
"test12345".match(/test\d+?/); // ["test1"]
登入後複製

字符转义

在正则表达式中元字符是有特殊的含义的,当我们要匹配元字符本身时,就需要用到字符转义,比如:

/\./.test("."); // true

分组 & 分支条件

正则表达式可以用 " ()  " 来进行分组,具有分组的正则表达式除了正则表达式整体会匹配子字符串外,分组中的正则表达式片段也会匹配字符串。

分组按照嵌套关系和前后关系,每个分组会分配得到一个数字组号,在一些场景中可以用组号来使用分组。

在 replace、match、exec函数中,分组都能体现不同的功能。

replace函数中,第二个参数里边可以用 $+数字组号来指代第几个分组的内容,如:

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"    (\/\w+)分组匹配的就是 /index ,

在第二个参数中为其添加上版本号

match函数中,当正则表达式有全局属性时,会捕获所有满足正则表达式的子字符串

"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]
登入後複製

但是当正则表达式没有全局属性,且正则表达式中有分组的时候,match函数只会返回整个正则表达式匹配的第一个结果,同时会将分组匹配到的字符串也放入结果数组中:

"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 我们可以用match函数来分解url,获取协议、host、path、查询字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]
登入後複製

exec函数在正则表达式中有分组的情况下,表现和match函数很像,只是无论正则表达式是否有全局属性,exec函数都只返回一个结果,并捕获分组的结果

/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]
登入後複製

当正则表达式需要匹配几种类型的结果时,可以用到分支条件,例如

"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd"
"asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]
登入後複製

 注意,分支条件影响它两边的所有内容, 比如 hi|hello  匹配的是hi或者hello,而不是 hiello 或者 hhello

分组中的分支条件不会影响分组外的内容

"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]
登入後複製

后向引用

正则表达式的分组可以在其后边的语句中通过  \+数字组号来引用

比如

// 匹配重复的单词
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]
登入後複製

断言

 (?:exp) , 用此方式定义的分组,正则表达式会匹配分组中的内容,但是不再给此分组分配组号,此分组在replace、match等函数中的作用也会消失,效果如下:

/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕获结果字符串和分组字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"]
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"
登入後複製

(?=exp) 这个分组用在正则表达式的后面,用来捕获exp前面的字符,分组中的内容不会被捕获,也不分配组号

/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]
登入後複製

(?!exp)  和前面的断言相反,用在正则表达式的后面,捕获后面不是exp的字符,同样不捕获分组的内容,也不分配组号

/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null
登入後複製

处理选项

javascript中正则表达式支持的正则表达式有三个,g、i、m,分别代表全局匹配、忽略大小写、多行模式。三种属性可以自由组合共存。

// 全局匹配 g 
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
//忽略大小写 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]
登入後複製

在默认的模式下,元字符 ^ 和 $ 分别匹配字符串的开头和结尾处,模式 m 改变了这俩元字符的定义,让他们匹配一行的开头和结尾

"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字符串^和$之间有换行符,匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ,改变^$的含义,让其匹配一行的开头和末尾,可以得到两行的结果
登入後複製

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

推荐阅读:

lastIndex与正则表达式的关系

正则表达式的\D元字符(等价于"[^0-9]")使用详解

以上是JS正規的使用及基本語法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板