JS正則表達式整理

1、初識正則表達式

相似於對象、數組，正則表達式也有表達式寫法和構造函數寫法兩種

var re = /a/    // 須要注意的是，這裏'//'之間必須得有內容，不然會當作註釋    var re = new RegExp('a')複製代碼

以上兩種寫法是等價的。

2、test

test方法用來判斷字符串中是否能匹配到正則設定的內容，若是能匹配則返回true，不然返回false

語法：正則.test(字符串)

var str = 'ytuhayij68'    var re = /a/    console.log(re.test(str)) // true複製代碼

3、search

search方法用來查找字符串中是否含有正則規定的內容，若是有則返回索引，不然返回-1

語法：字符串.search(正則)

var str = 'ytuhayij68'    var re = /a/    console.log(str.search(re)) // 4複製代碼

4、match

match方法用來查找字符串中匹配正則規定的內容，若是能匹配則返回數組，數組中包含匹配到的項，不然返回null

語法：字符串.match(正則)

var str = 'ytuhayij6a8'    
    var re = /a/    
    console.log(str.match(re)) // ["a", index: 4, input: "ytuhayij68", groups: undefined]複製代碼

這裏能夠看到，咱們最終的結果只返回了一個匹配的結果，正則默認第一次匹配成功則結束。若是咱們想要在字符串中查找全部符合條件的項，那麼須要在正則的後面加上g，表明全局匹配

var str = 'ytuhayiaj68'    var re = /a/g    console.log(str.match(re)) //  ["a", "a"]複製代碼

5、replace

replace方法用來查找字符串中匹配的內容，而後替換，返回新的字符串

語法：字符串.replace(正則,新字符串)或者字符串.replace(正則，回調函數)

var str = 'ytuhayiaj68'    var re = /a/g    console.log(str.replace(re, '*')) // ytuh*yi*j68複製代碼

當使用回調函數時，回調函數中能夠接受參數，第一個參數表明匹配到的值

var str = 'ytuhayiaj68'    var re = /ha/g    str.replace(re, function (str) {      console.log(str) // ha    })複製代碼

這裏有一個知識點須要注意，回調函數中從第二個參數開始接收的是正則的子項。

例如：var re = /(h)(a)(y)/g

這裏把(h)(a)(y)稱做母項，h爲第一個子項，a爲第二個子項，y爲第三個子項，依次類推。

通常第一個子項用$1表示，以後類推。

var str = 'ytuhayiaj68'    var re = /(h)(a)(y)/g    str.replace(re, function ($0, $1) {      console.log($0) // hay      console.log($1) // h    })複製代碼

6、轉義字符

正則中經常使用到的轉義字符

\s：空格

\S：非空格

\d：數字

\D：非數字

\w：字符（字母、數字、下劃線）

\W：非字符

\b：單詞邊界

\B：非單詞邊界

\1：重複第一個子項

\2：重複第二個子項

. ：表明任意字符（這個比較特殊）

7、量詞

咱們使用正則匹配時，可能須要如下場景，某個字符能夠匹配，也能夠不匹配，某個項須要匹配必定的次數，那麼這時就須要用到量詞了，正則中的經常使用量詞以下：

{4,7}：大於等於4次小於等於7次

{4,}：大於等於4次

{4}：等於4次

?：0次或1次   === {0,1}

+:  大於等於1次 === {1,}

*：大於等於0次 === {0,}

8、位置匹配

^：脫字符，匹配開頭，在多行匹配中匹配行開頭

$：美圓符號，匹配結尾，在多行匹配中匹配行結尾

\b：是單詞邊界，具體就是\w和\W之間的位置，也包括\w和^之間的位置，也包括\w和$之間的位置

\B：是\b的反面的意思，非單詞邊界。例如在字符串中全部位置中，扣掉\b，剩下的都是\B的。

(?=p)：其中p是一個子模式，即p前面的位置

(?!p)：就是(?=p)的反面意思

1.把字符串的開頭和結尾用'#'替換

var result = "hello".replace(/^|$/g,'#')console.log(result) // #hello#複製代碼

var result = 'I\nlove\nyou'.replace(/^|$/gm, '#')console.log(result) /** * #I# * #love# * #you# */複製代碼

多行匹配時，兩者是行的概念。

2.在字符l的前面添加'#'

var result = 'hello'.replace(/(?=l)/g,'#') console.log(result) // he#l#lo複製代碼

3.在除了l前面的位置添加'#'

var result = 'hello'.replace(/(?!l)/g,'#') console.log(result) // #h#ell#o#複製代碼

4.數字的千位分隔符表示法

var result = '2345567886756434'.replace(/(?!^)(?=(\d{3})+$)/g,',')console.log(result) // 2,345,567,886,756,434複製代碼

9、一些正則的小例 子

1.去掉某個字符串的收尾空格

var str = ' ytuhayiaj68 '    var re = /\b\s+|\s+\b/g    var newStr = str.replace(re, '')    console.log('(' + newStr + ')') // (ytuhayiaj68)複製代碼

這裏用到了\b，表示這個字符串的邊界。

或

var str = ' ytuhayiaj68 '    var re = /(^\s+)|(\s+$)/g    var newStr = str.replace(re, '')    console.log('(' + newStr + ')') // (ytuhayiaj68)複製代碼

注意：第二種寫法中有用到^和$這兩個字符，其中^寫在正則的前面表示字符串起始位置，$寫在正則的後面表示字符串的結束位置。

2.找到頁面中對應的class爲box1的項，將之背景變動爲紅色

<ul>    <li class="box1"></li>    <li></li>    <li class="box1box2"></li>    <li></li>    <li class="box1 box2"></li>  </ul>  <script>    var liList = document.getElementsByTagName('li')    function changeBg(listNode, classItem) {      var re = new RegExp('\\b' + classItem + '\\b')      for (var i = 0; i < listNode.length; i++) {        if (re.test(listNode[i].className)) {          listNode[i].style.background = 'red'        }      }    }    changeBg(liList, 'box1')  </script>複製代碼

這裏須要注意兩點，一個是若是正則中須要用變量的話，那麼必須用構造函數的方式來構造正則傳參。一個是添加\b時須要在前面加\，這樣才能將\b傳入正則中

3.關鍵字屏蔽，將字符串中的「導遊」和「遊客」都替換成「**」

var str = '責成涉事導遊員趙某某向遊客賠禮道歉，對涉事導遊員趙某某做出吊銷導遊證的行政處罰'    var re = /導遊|遊客/g    var newStr = str.replace(re, function ($0, $1) {      var result = ''      for (var i = 0; i < $0.length; i++) {        result += '*'      }      return result    })    console.log(newStr) // 責成涉事**員趙某某向**賠禮道歉，對涉事**員趙某某做出吊銷**證的行政處罰複製代碼

4.去掉字符串中包含的標籤，如<div><h3>等等

var str = '去掉<h3>字</h3>符串<div class="hello">中包</div>含的標籤'    var re = /<[^>]+>/g    console.log(str.replace(re, '')) // 去掉字符串中包含的標籤複製代碼

這裏在中括號內部使用了^，[^>]這個總體表明着非>的字符

5.將一個字符串轉化爲駝峯方式，如："get-element-by-id"

var str = 'get-element-by-id'var re = /-\w/gvar newStr = str.replace(re, function ($0) {   return $0.slice(1).toUpperCase()})console.log(newStr) // getElementById複製代碼

6.匹配xxyy模式

var str = 'xxyy'var re = /(\w)\1(\w)\2/console.log(re.test(str)) // true複製代碼