整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript正則表達式入門知識詳細介紹

          正則表達式,在各種語言(JS、Java、Php等)里面都是很常見的,而且語法都有相似之處。作為新手,第一次接觸正則,可能一臉茫然,這是什么東西,語法這么奇怪。其實它的語法是有跡可循的,而且基本是規定的語法模式,只要掌握它的語法,你也可以寫出屬于你自己的正則表達式。

          下面就是我們一起學習的內容,可以先了解一下:

          1、什么是正則表達式?

          2、正則表達式用在什么地方?

          3、如何創建一個正則表達式?

          4、正則表達式“元字符”有哪些?含義是什么?

          5、正則表達式優先級

          6、正則表達式相關方法有哪些?

          7、正則表達式思維導圖

          什么是正則表達式

          正則表達式(regular expression)是描述了一種字符串匹配的模式,可以用來檢查一個字符串是否含有某種子串、將匹配的子串做替換或者從某個字符串中取出符合某個條件的子串等。

          簡單的講:正則表達式就是處理字符串的。

          正則表達式用在什么地方

          1、常用于表單校驗(如登錄用戶名、密碼等),校驗數據有效性

          2、替換文本,如數據里面含有大量的換行符(enter),輸出到頁面是看不到的,需要全局替換成</br>

          3、根據模式匹配從字符串中提取一個子字符串。可以用來在文本或者輸入字段中查找特定的文字。

          如何創建一個正則表達式

          創建一個正則表達式,有兩種方式:

          1、字面量創建方式

          2、實例創建方式

          // 字面量創建方式 
          var reg = /pattern/flags; 
           
          //實例創建方式 
          var reg = new RegExp(pattern, flags);
          

          描述:

          pattern: 正則表達式(正則表達式主體)

          flags: 標識(修飾符) 標識主要包括:

          1. i 忽略大小寫匹配

          2. m 多行匹配,即在到達一行文本末尾時還會繼續尋常下一行中是否與正則匹配的項

          3. g 全局匹配 模式應用于所有字符串,而非在找到第一個匹配項時停止

          字面量創建方式和構造函數創建方式又有什么區別呢???

          1、字面量創建方式不能進行字符串拼接,實例創建方式是可以的

          var regParam = 'cm'; 
          var reg1 = new RegExp(regParam+'1'); 
          var reg2 = /regParam/; 
          console.log(reg1); // /cm1/ 
          console.log(reg2); // /regParam/
          

          2、字面量創建方式特殊含義的字符不需要轉義,實例創建方式需要轉義

          var reg1 = new RegExp('\\d'); // /d/ 
          var reg2 = new RegExp('\\\\d') // /\\d/ 
          var reg3 = /\\d/; // /\\d/
          

          正則表達式“元字符”有哪些?含義是什么?

          “元字符”是正則表達式的關鍵,因為每個都有特殊的含義,所以一定要掌握。

          特殊含義的元字符

          \\d : 0-9之間的任意一個數字 \\d只占一個位置 
          \\w : 數字,字母 ,下劃線 0-9 a-z A-Z _ 
          \\s : 空格或者空白等 
          \\D : 除了\\d 
          \\W : 除了\\w 
          \\S : 除了\\s 
           . : 除了\\n之外的任意一個字符 
           \\ : 轉義字符 
           | : 或者 
          () : 分組 
          \\n : 匹配換行符 
          \\b : 匹配邊界 字符串的開頭和結尾 空格的兩邊都是邊界 => 不占用字符串位數 
           ^ : 限定開始位置 => 本身不占位置 
           $ : 限定結束位置 => 本身不占位置 
          [a-z] : 任意字母 []中的表示任意一個都可以 
          [^a-z] : 非字母 []中^代表除了 
          [abc] : abc三個字母中的任何一個 [^abc]除了這三個字母中的任何一個字符
          

          量詞元字符

          * : 0到多個 
          + : 1到多個 
          ? : 0次或1次 可有可無 
          {n} : 正好n次; 
          {n,} : n到多次 
          {n,m} : n次到m次
          

          量詞會出現在元字符后面 如\d+,用來限定出現在前面的元字符的次數

          實例:

          var str = '1223334444'; 
          var reg = /\\d{2}/g; 
          var res = str.match(reg); 
          console.log(res) //["12", "23", "33", "44", "44"] 
           
          var str =' 我是web秀 '; 
          var reg = /^\\s+|\\s+$/g; // 匹配開頭結尾空格 
          var res = str.replace(reg, ''); 
          console.log('('+res+')') // (我是web秀)
          

          現在拿著正則表達式(/^\s+|\s+$/g)去上方元字符中比對,是不是發現就容易理解多了?

          正則表達式優先級

          正則表達式,和我們數學運算一樣,也有優先級問題(有乘除的先算乘除,再算加減,沒有從左向右依次計算)。

          1、正則表達式從左到右進行計算,并遵循優先級順序。

          2、相同優先級的會從左到右進行運算,不同優先級的運算先高后低。

          下面是常見的運算符的優先級排列 依次從最高到最低說明各種正則表達式運算符的優先級順序:

          \\ // 轉義符 
          (), (?:), (?=), [] // 圓括號和方括號 
          *, +, ?, {n}, {n,}, {n,m} // 量詞限定符 
          ^, $, \\任何元字符、任何字符 // 定位點和序列(即:位置和順序) 
          | // 替換,"或"操作 字符具有高于替換運算符的優先級,使得"m|food"匹配"m"或"food"。若要匹配"mood"或"food",請使用括號創建子表達式,從而產生"(m|f)ood"。
          

          正則表達式相關方法有哪些

          正則表達式常用的方法有test、exec、match和replace這四個方法。

          1、reg.test(str) 用來驗證字符串是否符合正則 符合返回true 否則返回false

          var str = 'abc'; 
          // \\w 表示數字,字母 ,下劃線 0-9 a-z A-Z _ 
          // + 表示1到多個 
          var reg = /\\w+/; 
          console.log(reg.test(str)); // true
          

          2、reg.exec() 用來捕獲符合規則的字符串

          var str = 'abc123def456ght789'; 
          // \\d 表示0-9之間的任意一個數字 \\d只占一個位置 
          // + 表示1到多個 
          var reg = /\\d+/; 
          console.log(reg.exec(str)) 
          // ["123", index: 3, input: "abc123def456ght789", groups: undefined] 
          console.log(reg.lastIndex) 
          // 0
          

          ["123", index: 3, input: "abc123def456ght789", groups: undefined] "123" 表示我們捕獲到的字符串 index:3 表示捕獲開始位置的索引 input 表示原有的字符串

          當我們用exec進行捕獲時,如果正則沒有加'g'標識符,則exec捕獲的每次都是同一個,當正則中有'g'標識符時 捕獲的結果就不一樣了,我們還是來看剛剛的例子

          var str = 'abc123def456ght789'; 
          var reg = /\\d+/g; // 加了標識符g 
          console.log(reg.lastIndex) 
          // lastIndex : 0 
           
          console.log(reg.exec(str)) 
          // ["123", index: 3, input: "abc123def456ght789"] 
          console.log(reg.lastIndex) 
          // lastIndex : 6 
           
          console.log(reg.exec(str)) 
          // ["456", index: 9, input: "abc123def456ght789"] 
          console.log(reg.lastIndex) 
          // lastIndex : 12 
           
          console.log(reg.exec(str)) 
          // ["789", index: 15, input: "abc123def456ght789"] 
          console.log(reg.lastIndex) 
          // lastIndex : 18 
           
          console.log(reg.exec(str)) 
          // null 
          console.log(reg.lastIndex) 
          // lastIndex : 0
          

          每次調用exec方法時,捕獲到的字符串都不相同 lastIndex :這個屬性記錄的就是下一次捕獲從哪個索引開始。 當未開始捕獲時,這個值為0。

          如果當前次捕獲結果為null。那么lastIndex的值會被修改為0.下次從頭開始捕獲。 而且這個lastIndex屬性還支持人為賦值。

          3、str.match(reg) 如果匹配成功,就返回匹配成功的數組,如果匹配不成功,就返回null

          //match和exec的用法差不多 
          var str = 'abc123def456ght789'; 
          var reg = /\\d+/; 
          console.log(reg.exec(str)); 
          // ["123", index: 3, input: "abc123def456ght789"] 
          console.log(str.match(reg)); 
          // ["123", index: 3, input: "abc123def456ght789"]
          

          上邊兩個方法console的結果是完全相同的,并無二致,但是當我們進行全局匹配時,二者的不同就會顯現出來了。

          //match和exec的用法差不多 
          var str = 'abc123def456ght789'; 
          var reg = /\\d+/g; 
          console.log(reg.exec(str)); 
          // ["123", index: 3, input: "abc123def456ght789"] 
          console.log(str.match(reg)); 
          // ["123", "456", "789"]
          

          4、str.replace() 匹配字符串,匹配成功的字符去替換成新的字符串

          var str = '我是web6'; 
          var res = str.replace(/\\d/g,'秀') 
          console.log(res) 
          // 我是web秀
          

          replace的第二個參數也可以是一個函數 str.replace(reg,fn);

          var str = '2017-01-06'; 
          str = str.replace(/-\\d+/g,function(){ 
           console.log(arguments) 
          }) 
          // ["-01", 4, "2017-01-06"] 
          // ["-06", 7, "2017-01-06"] 
          // "2017undefinedundefined"
          

          正則表達式思維導圖

          總結

          總的來講,只要明白元字符的意思,你就能看懂正則表達式的意思,同時也能書寫出自己的正則表達式,同時了解正則的優先級問題,掌握常用的幾個正則表達式方法,日常開發正則方面就沒有問題了。如果需要更高深層次的問題,那這些事遠遠不夠的。

          則表達式在js中有很多用途,最常見的是在表單驗證中,驗證一些字符串是否符合要求,如email、手機號等等,學好正則對于前端工程師來說是一個不錯的輔助技能。

          圖片來自網絡

          一、特殊字符

          1、$

          正則的結尾符號

          2、^

          開始符號

          3、()

          標記一個子表達式的開始和結束位置

          4、[]

          匹配括號中任意一個; 例:

          結果就是true

          5、{}

          括號里是匹配幾個,一般用來限制位數;例:

          匹配位數是4~7位,7個a返回true,8個就false;

          有三種用法:

          {3}:表示匹配三位;

          {3,}:表示匹配三位及以上;

          {3,7}:表示匹配3到7位

          6、*

          表示匹配0次或多次;相當于{0,}

          7、?

          表示要匹配的是0或1位;

          8、+

          表示匹配前面的字符串一次或多次

          9、.

          匹配任意字符

          10、|

          “或”:不解釋

          11、\w

          字母、數字、下劃線

          12、\W

          非字母、數字、下劃線

          13、\d

          數字,等價于[0-9]

          14、\D

          非數字,等價于[^0-9]

          15、\s

          匹配空格

          二、js方法

          1、match方法:

          挑選相匹配的內容:例:

          結果是“1,2,3”

          2.test方法:

          返回一個布爾值,表示是否匹配

          上述結果是“true”

          3、replace方法:

          用于將匹配正則的字符串進行替換,例:

          前面//里面是被替換的內容,后面加的字符串是要替換的內容。

          例:var path=req.url.replace(/\/?(?:\?.*)?$/,'').toLowerCase();

          獲取“/”后邊的路徑。

          .給定正則表達式/^(SE)?[0-9]{12}$/,滿足此匹配條件的字符串是:()

          A."123456789123"

          B."SI12345678"

          C."1234567890"

          D."ESX1234567Y"

          2.給定正則表達式 /^([1-9]|[1-9][0-9]|[1-9][0-9][0-9])$/,滿足此匹配條件的字符串是:()

          A."010"

          B."0010"

          C."127"

          D."10000"

          3.給定正則表達式 /^[0-5]?[0-9]$/,滿足此匹配條件的字符串是:

          A."99"

          B."009"

          C."0009"

          D."10"

          4.匹配一個字符串中兩個相鄰單詞(它們之間可以有一個或者多個空白,如空格、制表符或者任何其他UNICODE空白符)的正則表達式是( )。

          A./\b(\b+)\s+\b/

          B./\b(\w+)\s+\b/

          C./\b(\w*)\s+\b/

          D./\b(\w+)\s+\b/

          5.已知代碼如下,則結果ns變量的值是( )。var s='The AAA is a good AAAA.'; var r=/A/; var ns=s.replace(r,'a');答案是()

          A.The aAA is a good AAAA.'

          B.The aaa is a good aaaa.'

          C.The AAA is a good aAAA.'

          D.The aAA is a good aAAA.'

          6.給定字符串"<p>第二,3G資費起反作用。</p>",求一正則式,能夠匹配這當中的內容( )。

          A./<p>(.*?)</p>/

          B./<p>*</p>/

          C./<p>(*)</p>/

          D./<p>(*?)</p>/

          7.軟件開發中常用的匹配一個html標記的正則表達式是/</?[a-z][a-z0-9]*[^<>]*>/,則符合此格式要求的是( )。

          A.<a<>

          B.<\>

          C.abc

          D.</body>

          8.已知"JavaScript".search(/a(.)a/);,則這個函數返回值是:()

          A.2

          B.3

          C.4

          D.1

          9.有關String的search函數,說法錯誤的是:()

          A."JavaScript".search(/script/i);將返回子串起始位置4

          B.如果search的參數不是正則表達式,則首先會通過RegExp構造函數將它轉換成正則表達式。

          C.search支持全局檢索

          D.忽略參數regexp的lastIndex屬性,總是從string的開始位置搜索

          10.String函數replace的語法格式是stringobject.replace(regexp/substr,replacement)。說法正確的是:()

          A.參數replacement不是必需參數。

          B.replacement可以是字符串,也可以是函數。

          C.replacement中的$字符沒有什么特定的含義。

          D.ECMAScript第5版定義replace()的replacement參數可以用一個函數來代替字符串。

          11.String類match函數的語法格式是stringObject.match(searchvalue) 或者 stringObject.match(regexp),下列說法錯誤的是:()

          A.如果regexp參數不是RegExp對象,則需要首先把它傳遞給RegExp構造函數,將其轉換為RegExp對象。

          B.函數的返回值存放匹配結果的數組。該數組的內容依賴于regexp是否具有全局標志g。

          C.全局匹配返回的數組的內容與非全局匹配返回的數組內容是一樣的。

          D.代碼'1 plus 2 equals 3'.match(/\d+/g); 將找出一個字符串中的所有數字。

          12.有關RegExp類exec函數錯誤的結論是:()

          A.exec總是包含它返回的數組中的每一個匹配項的全部細節,無論regexp是否為一個全局模式。

          B.exec是所有RegExp和String模式匹配方法中最強大的一個。

          C.exec在string中搜索匹配regexp的文本。如果它找到一個匹配項,它將返回一個由匹配結果組成的數組;否則,它將返回null。返回數組的元素0是匹配的文本。

          D.不可以重復調用exec(),以便循環遍歷一個字符串中所有的匹配項。

          13.有關RegExp類的test方法正確的結論是:()

          A.test用于測試字符串string是否包含匹配參數regexp的文本,如果包含則返回1;否則,返回0。

          B./java/i.test("ECMAScript");將返回true

          C.r.test(s)等價于(r.exec(s)!=null)

          D./java/i.test("JavaScript");返回false

          14.匹配一個英文句子(假設句子最后沒有標點符號)最后一個單詞的正則表達式有( )。

          A.\b(\w+)\s*$

          B.\b(\w+)\s+$

          C.\s(\w+)\s*$

          D.\b(\w+)\b*$

          15.已知Visa卡號可能有13位或者16位,且首位總是為4。則用于匹配Visa卡號的正則表達式有( )。

          A./^5[1-5][0-9]{14}$/

          B./^5[1-5]\d{14}$/

          C./5[^1-5][0-9]{14}$/

          D./^(4\d{12}(?:\d{3})?)$/

          16.在HTML文件中經常遇到注釋行,對應這種注釋行的正則表達式是/<!--.*?-->/,滿足此匹配條件的字符串有( )。

          A."<html>"

          B."<p>First paragraph</p>"

          C."<a

          D."<!--More boring stuff omitted-->"

          17.已知MasterCard信用卡必須包含16位數字。在這16個數字中,前兩個數字必須是51-55之間的數字。則如下的正則表達式中合乎匹配MasterCard信用卡的有( )。

          A./^5[1-5][0-9]{14}$/

          B./^5[1-5]\d{14}$/

          C./5[^1-5][0-9]{14}$/

          D./^5[1-5][0-9]{14,14}$/

          18.以下說法錯誤的有:( )

          A.JS中如果正則表達式中出現“(?=p)”部分,它有可能是一種分組。

          B.JS中如果正則表達式中出現“(?!p)”部分,它有可能是一種分組。

          C.JS正則表達式理論中?(包括與其他字符相結合的情況)至少有四種含義。

          D.\B用于匹配單詞邊界的字符,與\b含義正好相反。

          19.匹配一個html標記的正則表達式是/</?[a-z][a-z0-9]*[^<>]*>/,則符合此格式要求的有( )。

          A.<html>

          B.</body>

          C.</?a>

          D.<br>

          20.JS程序運行時每次遇到對象直接量(初始化表達式)諸如{}和[]的時候都會創建新對象。()

          A.正確

          B.錯誤

          請把你的答案寫在留言區,我們會將正確答案也公布在留言區里。


          主站蜘蛛池模板: 中文字幕一区二区区免| 久久免费精品一区二区| 国产精品一区二区久久乐下载| 亚洲一区二区三区深夜天堂| 精品国产乱子伦一区二区三区 | 女人和拘做受全程看视频日本综合a一区二区视频 | 国产精品视频一区二区三区不卡| 亚洲国产专区一区| 文中字幕一区二区三区视频播放| 一区国产传媒国产精品| 日本精品一区二区久久久| 日韩人妻无码一区二区三区综合部| 亚洲AV色香蕉一区二区| 亚洲日韩国产欧美一区二区三区| 日韩精品一区二区午夜成人版 | 人妻天天爽夜夜爽一区二区| 亚洲一区二区三区在线观看蜜桃| 日本精品3d动漫一区二区| 精品国产亚洲一区二区在线观看| 少妇激情AV一区二区三区 | 鲁大师成人一区二区三区| 久久高清一区二区三区| 欧洲精品一区二区三区在线观看| 波多野结衣AV无码久久一区| 97久久精品无码一区二区天美| 一区二区三区四区在线视频 | 精品人妻AV一区二区三区 | 一区二区亚洲精品精华液| 中文国产成人精品久久一区| 亚洲AV日韩综合一区| 一区二区三区无码高清视频| 无码精品人妻一区二区三区AV| 天堂va在线高清一区 | 亚洲Av无码国产一区二区 | 亚洲欧洲∨国产一区二区三区| 91一区二区视频| 久久国产精品一区| 日本一区中文字幕日本一二三区视频 | 中文字幕人妻第一区| 色狠狠色噜噜Av天堂一区| 在线免费观看一区二区三区|