正則表達式之小有名氣

上一篇文章已經講了如何匹配簡單的字符串,如何全局搜索,以及一些特殊字母i,g,m所表明的含義
這篇文章講的內容有點多最好分兩次讀,不過不用擔憂不少東西並不須要你特地記住
知道有那麼一回事先用先查都OKcss

再談^和$

以前已經瞭解過1表示除a,b,c以外的字符,如今又要多一種用法了
/^test/  表示以test開頭的字符 這裏的^表示以...開頭
那麼$表示什麼呢? 它的含義是以...結尾
/test$/ 表示以test結尾的字符

轉義

首先咱們要知道並非全部的字符都與自身等價的,好比/hello/表示咱們要匹配‘hello’字符,可是若是想匹配food$並不能這麼寫/food$/,由於$有獨特的含義,就像咱們上篇文章學到的[],^這幾個符號同樣。若是想要匹配'food$'這個字符串,那就須要用反斜槓進行轉義,通俗的說就是在特殊符號前面加上 就像這樣
/food\$/ 匹配food$字符

從webpack配置學正則

我copy了一段webpack配置,只看rules中test表示的正則就能夠
在正則中.也有特定的含義,因此若是把它當字符進行匹配的話也要進行轉義根據上面所學到的,判斷下面代碼中的正則表達式所表明的含義,答案我已經寫在註釋中了
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },//以.css結尾的 使用css-loader處理
      { test: /\.ts$/, use: 'ts-loader' }// 以.ts結尾的
    ]
  }
};

重複匹配

若是要匹配四個‘a’字符,咱們固然能夠用/aaaa/這樣表示,若是匹配5個'a' 10個'a'呢?正則沒那麼‘傻’早已爲咱們準備了簡便方法/a{4}/ 表示匹配含有連續4個'a'的字符
在重複選項上,正則提供了不少方式
  • 在一個字符後面加一個'?',能夠定義該字符是可選的(能夠出現一次或者根本不出現)
/t?est/  能夠匹配 test 或者 est
  • 若是一個字符要出現一次或屢次(至少出現一次),可使用加號'+'
/t+est/ 能夠匹配test ttest tttest 而不能匹配est
  • 若是一個字符要出現零次或屢次,可使用星號'' (注意與?的區別,?表明要麼不出現要麼只能出現一次 表明要麼不出現要麼出現不止一次)
/t*est/ 能夠匹配test ttest tttest est
  • 也能夠在字符後面的花括號裏指定一個數字來表示重複次數
/a{4}/ 匹配包含連續4個a的字符串
  • 也能夠在字符後面的花括號指定一個重複次數的區間
/a{4,10}/ 匹配任何含有連續4個至10個a的字符串
  • 還能夠在省略區間中第二個值(可是要保留逗號) 這裏直接上代碼,用文字敘述容易迷糊
/a{4,}/ 若是逗號後面不寫第二個參數那麼表示匹配任何含有連續4個或多於4個a的字符串
這些重複操做符能夠是貪婪的能夠是非貪婪的,默認狀況它們是貪婪的
這裏不用口語敘述,看代碼更直觀
遇到連續四個a即中止搜索
var str = "aaaabbbcaadda"
var newStr = str.replace(/a+/,'嘿')//"嘿bbbcaadda"
由於加了g進行全局匹配,咱們看一看有哪些字符符合條件
開頭的4個a
c後面的2個a
d後面的a
這就是貪婪匹配遇到成串的符合條件的字符,將匹配這個’串‘

var str = "aaaabbbcaadda"
var newStr = str.replace(/a+/g,'嘿')//"嘿bbbc嘿dd嘿"
若是後面在'+'後跟了'?'則表示進行非貪婪匹配,具體結果請看註釋
var str = "aaaabbbcaadda"
var newStr = str.replace(/a+?/g,'嘿')//"嘿嘿嘿嘿bbbc嘿嘿dd嘿"

分組

上面已經說到能夠用/t+est/這種用法,可是+隻影響它前面的t,若是想讓+影響多個字符可使用括號進行分組
/(ab)+/ 匹配一個或多個連續出現的字符串'ab'
var str = "abcdababef"

var newStr = str.replace(/(ab)+/g,"嘿")//"嘿cd嘿ef"
請注意cd後的連續兩個ab被替換成一個嘿而不是兩個

'|'操做符

可使用豎線表示或者
/a|b/ 匹配a或b字符

/(ab)+|(cd)+/ 匹配出現一次或屢次的「ab」 或者「cd」
這一篇概念有點多,不須要一下看完,分兩次看好了。原本想把一些預約義字符類寫完的,轉念一想灌輸太多內容是不利於學習的,並且那些東西也並非很重要,只是用的時候現查的一些字母而已。因此留到下章再說

  1. abc
相關文章
相關標籤/搜索