正則表達式

正則表達式(Regular Expression)是計算機科學的一個概念。正則表達式使用單個字符串來描述、匹配一系列符合某個句法規則的字符串。在很多文本編輯器里,正則表達式通常被用來檢索、替換那些符合某個模式的文本。

正則表達式就像篩子一樣,從目標字符串中篩出我們需要的內容.

RegExp類型

ECMAScript通過RegExp類型來支持正則表達式
其語法類似Perl的語法:
形式為 * var expression = / pattern / flags; *

  • pattern(模式)部分可以是任何簡單或者復雜的正則表達式,可以包含字符類,限定符,分組,向前查找和反向引用;

  • 每個正則表達式都可帶 一或多個標志(flags),用以標明正則表達式的行為;

1.1-----正則表達式的匹配模式支持以下三個標志:

  • g: 表示為全局(global)模式,及模式將被應用于所有的字符串,而非發現第一個匹配項立即停止;

  • i: 表示不區分大小寫(case-insensitive)模式,即在確定匹配項時忽略模式與字符串的大小寫;

  • m:表示多行(multiline)模式,即在到達一行文本的末尾時還會繼續查找下一行中是否存在與模式匹配的項;

1.2-----元字符

正則表達式讓人望而卻步以一個重要原因就是轉義字符太多了,組合非常多,但是正則表達式的元字符(在正則表達式中具有特殊意義的專用字符,可以用來規定其前導字符)并不多:

  • ( 小括號
  • [ 方括號(中括號)
  • { 花括號
  • \ 正斜線
  • ^ 頂三角
  • $ 美元符
  • | 豎線
  • ) 小括號
  • ? 問號
  • * 星號
  • + 加號
  • . 點號

并不是每個元字符都有特定的意義,在不同的組合中元字符有不同的意義,分類看一下:
\t -----------------水平制表符(即table按鍵產生的效果,會生成8個空格)
\r -----------------回車符(即enter鍵的效果)
\n -----------------換行符(顧名思義,會產生換行效果)
\f -----------------換頁符(應該是針對打印機的命令,走紙換頁是針對打印機輸出時的命令符)
\cX -----------------與X對應的控制字符(Ctrl+X)
\v -----------------垂直制表符(垂直制表符應該垂直空幾個格,效果類似于連續enter幾下)
\0 -----------------空字符(代表為空null)

1.3----字符類

一般情況下正則表達式一個字符(轉義字符算一個)對應字符串一個字符,表達式 ab\t 的含義是;

但是我們可以使用元字符[]來構建一個簡單的類,所謂類是指,符合某些特征的對象,是一個泛指,而不是特指某個字符了,我們可以使用表達式 [abc] 把字符a或b或c歸為一類,表達式可以匹配這類的字符


1.4----取反

元字符[]組合可以創建一個類,我們還可以使用元字符^創建反向類/負向類,反向類的意思是不屬于XXX類的內容,表達式 [^abc] 表示不是字符a或b或c的內容

1.5----范圍類

我們可以使用 x-y來連接兩個字符表示從x到y的任意字符,這是個閉區間,也就是說包含x和y本身,這樣匹配小寫字母就很簡單了

1.6----預定義類

預定義類 范圍 含義
. [^\r\n] 除了回車符和換行符之外的所有字符
\d [0-9] 數字字符
\D [^0-9] 非數字字符
\s [\t\n\x0B\f\r] 空白符
\S [^\t\n\x0B\f\r] 非空白符
\w [a-zA-Z_0-9] 單詞字符,字母、數字下劃線
\W [^a-zA-Z_0-9] 非單詞,字符,下劃線
[\x{4e00}-\x{9fa5}] 表示utf8編碼之后的中文范圍內中的任意一個

轉義字符相關

1.7----邊界

正則表達式還提供了幾個常用的邊界匹配字符

字符 含義
^ 以xxx開頭
$ 以xxx結尾
\b 單詞邊界
\B 非單詞邊界

1.8----量詞

字符 含義
? 出現零次或一次(最多出現一次)
+ 出現一次或多次(至少出現一次)
* 出現零次或多次(任意次)
{n} 出現n次
{n,m} 出現n到m次
{n,} 至少出現n次

1.8----貪婪模式與非貪婪模式

  • 量詞在默認下是盡可能多的匹配的,也就是大家常說的貪婪模式;
  • 既然有貪婪模式,那么肯定會有非貪婪模式,讓正則表達式盡可能少的匹配,也就是說一旦成功匹配不再繼續嘗試,做法很簡單,在量詞后加上?即可

分組,或,分組嵌套,忽略分組,前瞻(待補充完善)

  • 使用() 進行分組;
    使用()將想要進行操作的字符串進行分組;

  • 使用字符|達到或的功效
    | 該字符表示或,效果類似于邏輯或;

  • 前瞻:
    exp1(?=exp2) 匹配后面是exp2的exp1
    exp1(?!exp2) 匹配后面不是exp2的exp1


2相關方法

2.1------RegExp實例對象有五個屬性

  • RegExp實例對象有五個屬性

  • global:是否全局搜索,默認是false

  • ignoreCase:是否大小寫敏感,默認是false

  • multiline:多行搜索,默認值是false

  • lastIndex:是當前表達式模式首次匹配內容中最后一個字符的下一個位置,每次正則表達式成功匹配時,lastIndex屬性值都會隨之改變

  • source:正則表達式的文本字符串

2.2----RegExp.prototype.test(str)

該方法用于測試字符串參數中是否存正則表達式模式,如果存在則返回true,否則返回false.

2.3-----RegExp.prototype.exec(str)

方法用于正則表達式模式在字符串中運行查找,如果exec()找到了匹配的文本,則返回一個結果數組,否則返回 null

除了數組元素和length屬性之外,exec()方法返回對象還包括兩個屬性。

  • index 屬性聲明的是匹配文本的第一個字符的位置
  • input 屬性則存放的是被檢索的字符串string

全局調用

非全局調用

2.4----String.prototype.search(reg)

search() 方法用于檢索字符串中指定的子字符串,或檢索與正則表達式相匹配的子字符串

search() 方法不執行全局匹配,它將忽略標志g,它同時忽略正則表達式對象的lastIndex屬性,并且總是從字符串的開始進行檢索,這意味著它總是返回字符串的第一個匹配的位置

2.5----String.prototype.match(reg)

match()方法將檢索字符串,以找到一個或多個與regexp匹配的文本。但regexp是否具有標志 g對結果影響很大。

全局調用

非全局調用

2.6----String.prototype.replace(reg, replaceStr)

復習部分

  • 題目1: \d,\w,\s,a-zA-Z0-9,\b,.,*,+,?,x{3},^,$分別是什么?

    • \d: 代表范圍為[0-9]的某個數字字符;
    • \w:代表范圍為[a-zA-Z_0-9]的某個數字字符,字母字符或者數字下劃線;
    • \s:代表范圍為[\t\n\x0B\f\r]的某個空白符;
    • \b:代表了單詞的邊界;
    • . :[^\r\n] 除了回車符和換行符之外的所有字符;
    • * : 出現了零次或者多次(任意次);
    • +: 出現一次或多次(至少出現一次);
    • ?:出現零次或一次(最多出現一次);
    • x{3}:x出現了3次
    • ^ : 以XXX開頭;
    • $ :以XXX結尾;

  • 題目2: 寫一個函數trim(str),去除字符串兩邊的空白字符

      function trim(str){
     return str.replace(/^\s+|\s$/,'');
    }
      var str = "\t hello world \n";
      var result = trim(str);
      console.log(str);
    

  • 題目3: 寫一個函數isEmail(str),判斷用戶輸入的是不是郵箱

    function isEmail(str){
          var reg = /^\w+@\w+\.[a-zA-Z]+$/;
          return reg.test(str);
      }
        newstr = isEmail('wuyanwen1993@gamil.com');
        console.log(newstr);
    

  • 題目4: 寫一個函數isPhoneNum(str),判斷用戶輸入的是不是手機號

    function isPhoneNum(demo) {
      //正則表達式設置以+86出現1次,之后以數字結束,數字出現10次
        var reg = /^(\+86)?1\d{10}$/;
        return reg.test(demo);
    }
      newstr = isPhoneNum('15242456789');
      console.log (newstr);
    

  • 題目5: 寫一個函數isValidUsername(str),判斷用戶輸入的是不是合法的用戶名

(長度6-20個字符,只能包括字母、數字、下劃線)

   function isValidUsername(str){
      var reg = /^\w{6,20}$/
      return reg.test(str)
  }
      var str = 'aabbcccvvddd';
      console.log(isValidUsername(str));

  • 題目6: 寫一個函數isValidPassword(str), 判斷用戶輸入的是不是合法密碼(長度6-20個字符,只包括大寫字母、小寫字母、數字、下劃線,且至少至少包括兩種)

      function isValidPassword(str){
      //首先判斷用戶輸入的字符串是不是在6-20個字符的范圍內
      if(str.length >= 6 && str.length <=20){
          //定義一個變量來計數
          var count = 0;
          if(/[0-9]/.test(str)){
              count++;
          }
          if(/[a-z]/.test(str)){
              count++;
          }
          if(/[A-Z]/.test(str)){
              count++;
          }
          if(/_/.test(str)){
              count++;
          }
          if(count>2){
              //表明輸入通過了驗證
              alert('通過了驗證');
              return true;
          }else{
              //表明輸入未能通過驗證
              alert('未能通過驗證');
              return false;
          }
    
      }else{
          //如果用戶輸入的字符串不在限定的范圍內,則函數直接返回false
          alert('輸入字符串不在限定范圍內');
          return false;
        }
    }
      var str = 'abc122__ABC';
      isValidPassword(str);
    
  • 題目7: 寫一個正則表達式,得到如下字符串里所有的顏色

var reg =/#[0-9a-fA-F]{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee ";
console.log( subj.match(reg) ) ; // ['#121212', '#AA00ef']
  • 題目8: 下面代碼輸出什么? 為什么? 改寫代碼,讓其輸出[""hunger"", ""world""].

  • 返回一個數組,數組的元素為[""hunger" , hello "world""]

  • 首先要匹配一個'',所以首個''前面的字符串都排除;

  • 之后匹配一個除了換行符和回車符之外的任何一個字符,由于在點號后面加了*這個通配符,表示可0次或多次(任意次),所以一直持續到了字符串的末尾前的''

  • 最后匹配'';

    var str = 'hello  "hunger" , hello "world"';
    //匹配一個雙引號,之后為除了換行符及回車符之外的任意字符,之后為量詞通配符*,這里應該是取了一次,最后為雙引號
    var pat = /".*?"/g; //改成非貪婪模式即懶惰模式
    str.match(pat);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容