JS正規表示式入門

hope93發表於2019-02-16

什麼是正規表示式？

正規表示式其實就是，在一個字串序列中，按照你自己想要的匹配模式，將字串搜尋或替換的過程

正規表示式結構

/正規表示式主體/修飾符(可選)

//例項如下：
const patr = /china/i

解析： /china/i 是一個正規表示式，其中china是一個正規表示式主體，i 是一個修飾符(搜尋不區分大小寫)

使用正規表示式方法

search方法

檢索字串中指定的字串，並且返回子串的起始位置

const str = "hello world!";
const n = str.search(/hello/);
console.log(n); //輸出結果為0

replace方法

在字串中用一些字元替換另一些字元，或替換一個與正規表示式匹配的子串

const str = "hello world!";
const newstr = str.replace(/hello/, `hi`);
console.log(newstr); //輸出結果為hi world!

match方法

可在字串內檢索指定的值，或找到一個或多個正規表示式的匹配，但是它返回指定的值，而不是字串的位置

 const str = `hello world!`;
 const arr = str.match(/o/g);
 console.log(arr); //輸出結果[`o`, `o`]

test方法

用於檢測一個字串是否匹配某個模式，如果字串中含有匹配的文字，則返回 true，否則返回 false

 const str = `hello word!`;
 const regx = /o/;
 const flag = regx.test(str);
 console.log(flag); //輸出結果true

exec方法

返回一個陣列，其中存放匹配的結果。如果未找到匹配，則返回值為 null

     const str = `abc123abc321`;
      const pattern = /^abc/g;
      const flag = pattern.exec(str);
      console.log(flag); //["abc", index: 0, input: "abc123abc321", groups: undefined]

常見的正規表示式修飾符

i 不區分(ignore)大小寫

/abc/i 可以匹配 abc、aBC、Abc

g 全域性(global)匹配

如果不帶g,從左往右搜尋，找到第一個符合條件就返回；如果帶g，則從左往右，找到每個符合條件的都記錄下來，如下：

 const str = `hello world!`;
 const n1 = str.match(/o/g);
 console.log(n1); //輸出結果["o", "o"]
 const n2 = str.match(/o/);
 console.log(n2); //輸出結果["o", index: 4, input: "hello world!"]

m 多(more)行匹配

如果字串中存在n並且有開始^或結束$符的情況下，會預設作為一個換行符，g只匹配第一行，加上m則可以匹配多行，如下：

  const str = `hello
world
hello world
good hello`;
  const n1 = str.match(/^hello/gm);
  console.log(n1); //輸出結果：["hello", "hello"]
  const n2 = str.match(/world$/g);
  console.log(n2); //輸出結果：null

n2輸出為null，是因為沒有m則只匹配第一行，第一行中沒有與之匹配的字串，所有輸出null

正規表示式語法

定位符

^ 符：匹配字串開始的位置

      const str = `hello world!`;
      const pattr1 = /^hello/;
      const flag1 = pattr1.test(str);
      console.log(flag1); //輸出結果：true

      const pattr2 = /^world/;
      const flag2 = pattr2.test(str);
      console.log(flag2); //輸出結果：false

$ 符：匹配字串結束的位置

      const str = `hello world`;
      const pattr1 = /hello$/;
      const flag1 = pattr1.test(str);
      console.log(flag1); //輸出結果：false

      const pattr2 = /world$/;
      const flag2 = pattr2.test(str);
      console.log(flag2); //true

b 符：單詞邊界匹配，匹配單詞的開頭或結尾的位置，匹配的是一個位置

      const str = `word`;
      const pattern1 = /word/;
      const flag1 = pattern1.test(str);
      console.log(flag1); //true

      const pattern2 = /word/;
      const flag2 = pattern2.test(str);
      console.log(flag2); //true

      const str1 = `hello,world`
      const pattern3 = /hello/;
      const flag3 = pattern3.test(str1);
      console.log(flag3); //true

      const pattern4 = /helloworld/;
      const flag4 = pattern4.test(str1);
      console.log(flag4); //false

如果b在模式的開頭和結尾那沒有問題，但是如果b在兩個單詞之間，則得都符合b左右匹配的模式

B 符：非單詞邊界匹配，其實就是b的相反，b匹配的是單詞，而B匹配的是非單詞

      const str = `hello, 你好！我是小明！`;
      const pattern1 = /B/;
      const arr1 = str.split(pattern1);
      console.log(arr1);
      // 輸出結果：["h", "e", "l", "l", "o,", " ", "你", "好", "！", "我", "是", "小", "明", "！"]

      const pattern2 = //;
      const arr2 = str.split(pattern2);
      console.log(arr2);
      // 輸出結果：["hello", ", 你好！我是小明！"]

從上面例子中可以看出，b是可以把單詞匹配出來，而B不管是什麼都分隔，如果在一個字串中，有中英文，符合等等組成，如果要把裡面的單詞單獨提取出來，則可以使用b來提取單詞

特殊字元

. 符：匹配除換行符以外的任意單字元

       const str = `
`;
       const pattern = /./gm;
       const flag1 = pattern.test(str);
       console.log(flag1); //false

w 符：匹配字母或數字或下劃線（等價於`[A-Za-z0-9_]`）

       const str = `^^##hello, 123`;
       const pattern = /^w/;
       const flag1 = pattern.test(str);
       console.log(flag1); //false

         const str = `你好hello!`;
         const pattern = /^w/;
         const flag = pattern.test(str);
         console.log(flag); // false

如果頭部是漢字或者符號(除下劃線)，則返回false

W：用於匹配所有與w不匹配的字元

s 符：匹配任意的空白符（等價於 [ fnrtv]）

       const str = `abc`;
       const pattern = /s/;
       const flag1 = pattern.test(str);;
       console.log(flag1); // false

       const str1 = `abc cde`;
       const flag2 = pattern.test(str1);
       console.log(flag2); // true

S 符：匹配除單個空格符之外的所有字元（非s）

d 符：匹配數字

        const str = `123`;
        const pattern = /d/;
        const flag1 = pattern.test(str);
        console.log(flag1); // true

        const str1 = `abc`;
        const flag2 = pattern.test(str1);
        console.log(flag2); // false

限定符

* 符：匹配前面的子表示式重複出現0次或多次(可有可無)

  const str = `123abc###`;
  const pattern = /(d)*/;
  const flag1 = pattern.test(str);
  console.log(flag1); // true

+ 符：匹配前面的子表示式重複出現一次或更多次(至少一次)

        const str = `abc###`;
        const pattern = /(d)+/;
        const flag1 = pattern.test(str);
        console.log(flag1); // false

        const str2 = `123`;
        const flag2 = pattern.test(str2);
        console.log(flag2); // true

? 符：匹配前面的子表示式重複出現零次或一次

    const str = `eee123`;
    const pattern = /h+?/;
    const flag = pattern.test(str);
    console.log(flag); //false

當?跟在+後面的時，則此時必須出現一次，?一般都是跟在限定符後面的

{n} 符：匹配確定的 n 次（n為非負數整數）

  const str = `type`;
  const pattern = /t{2}/;
  const flag = pattern.test(str);
  console.log(flag); // false

t得要有兩個才能匹配，這裡不滿足2個，所有返回false

{n,} 符：至少匹配n 次（n為非負整數）

 const str = `ttypet`;
 const pattern = /t{2,}/;
 const flag = pattern.test(str);
 console.log(flag); // true

這裡t至少得重複出現2次才可以被匹配

{n,m} 符：最少匹配 n 次且最多匹配 m 次（n<m）

 const str = `food`;
 const pattern = /o{1,4}/;
 const flag = pattern.test(str);
 console.log(flag); // true
 //o出現2次，1<2<4

  const str = `food`;
  const pattern = /o{3,4}/;
  const flag = pattern.test(str);
  console.log(flag); // false
  //o出現2次，不屬於3到4的範圍

方括號

[abc]：查詢方括號之間的任何字元

 const str = `my name is lucy!`;
 const pattern = /^[lpo]/;
 const flag = pattern.test(str);
 console.log(flag); // false

const str = `my name is lucy!`;
const pattern = /^[mpo]/;
const flag = pattern.test(str);
console.log(flag); // true

¹：查詢任何不在方括號之間的字元

  const str = `my name is lucy!`;
  const pattern = /^[^mpo]/;
  const flag = pattern.test(str);
  console.log(flag); // false

  const str = `my name is lucy!`;
  const pattern = /^[^lpo]/;
  const flag = pattern.test(str);
  console.log(flag); // true

[0-9]：查詢任何從 0 至 9 的數字

 const str = `hello,123`;
 const pattern = /[0-9]$/;
 const flag = pattern.test(str);
 console.log(flag); // true

[a-z]：查詢任何從小寫 a 到小寫 z 的字元

   const str = `hello,123`;
   const pattern = /^[a-z]/;
   const flag = pattern.test(str);
   console.log(flag); // true

[A-Z]：查詢任何從大寫 A 到大寫 Z 的字元

  const str = `hello,123`;
  const pattern = /^[A-Z]/;
  const flag = pattern.test(str);
  console.log(flag); // false

簡單正式表示式例項

1.只能是數字或英文

      const str1 = `123456`;
      const str2 = `你好，123`;
      const str3 = "";
      const pattern = /^[a-zA-Z0-9]+$/;
      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);

      console.log(flag1); // true
      console.log(flag2); // false
      console.log(flag3); // false

2.中英文開頭

      const str1 = `中文+++123`;
      const str2 = `word123你好`;
      const str3 = `321wrod`;
      const pattern = /^[u4e00-u9fa5A-Za-z]+/;

      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);

      console.log(flag1); // true
      console.log(flag2); // true
      console.log(flag3); // false

這裡開頭以中英文開頭，則

^[u4e00-u9fa5A-Za-z]+

除了開頭要中英文，後面部分隨意都可以，沒有限制

3.校驗數值

最多保留兩位小數

      const str1 = 45;
      const str2 = 45.5;
      const str3 = 45.55;
      const str4 = 0.111;
      const pattern = /^[0-9]+(.[0-9]{0,2})?$/;
      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);
      const flag4 = pattern.test(str4);

      console.log(flag1); // true
      console.log(flag2); // true
      console.log(flag3); // true
      console.log(flag4); // false

這裡可以分成兩部分，一部分是整數部分，如下：

^[0-9]+

再一部分是小數部分，如下：

(.[0-9]{0,2})?

小數可以保留一位或者兩位或者不保, ? 表示0次或者一次

4.網址URL驗證

      const str1 = `www.baidu.com?id=123`;
      const str2 = `cnds.tang-123/china`;
      const str3 = `www.baidu.com311`;
      const pattern = /^([w-]+.)+[w-]+([w-./?%&=]*)$/;

      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);

      console.log(flag1); // true
      console.log(flag2); // true
      console.log(flag3); // false

開頭只能是數字或字母或下劃線或-至少得一個，則：

^([w-]+.)+

中間部分也至少得有一次

[w-]+

到後面的那部分隨意，可有可無

([w-./?%&=]*)

本章節主要就是簡單介紹了正規表示式的一些常用的東西，有不對的地方大家可以指出哈

abc ↩

正規表示式入門
2011-10-21
Regex 正規表示式入門
2020-05-04
【記錄】正規表示式入門
2019-04-21
正規表示式入門學習
2020-12-14
正規表示式基礎入門
2017-12-22
正規表示式從入門到入坑
2022-07-18
[js]正規表示式
2017-04-15
JS
js正規表示式
2017-11-20
JS
js 正規表示式
2009-10-09
JS
JS正規表示式從入門到入土（5）—— 量詞
2018-07-04
JS
C++與正規表示式入門
2020-07-23
C++
JS正規表示式從入門到入土（10）—— 字串物件方法
2018-07-11
JS字串物件
瞎說系列之正規表示式入門
2019-02-03
正規表示式快速入門(歸納版)
2017-10-23
正規表示式系列之初級入門篇
2018-07-09
javascript快速入門11--正規表示式
2013-12-01
JavaScript
正規表示式30分鐘入門教程
2012-12-18
js正規表示式速查
2019-02-20
JS
常用js正規表示式
2017-10-15
JS
JS 的正規表示式
2017-09-11
JS
JS基礎：正規表示式
2021-09-09
JS
JS中的正規表示式
2021-05-14
JS
JS金額正規表示式
2021-02-02
JS
JS正規表示式驗證
2018-11-26
JS
JS正規表示式總結
2018-12-20
JS
JS助記 ----- 正規表示式
2020-11-22
JS
JS實現正規表示式
2017-02-22
JS
js正規表示式基本用法
2017-07-27
JS
實戰JS正規表示式
2016-02-04
JS
JS常用正規表示式及驗證時間的正規表示式
2022-03-19
JS
JS正規表示式從入門到入土（2）—— 元字元和字元類
2018-06-28
JS字元
js中的正規表示式(1)
2019-02-27
JS
JS筆記(15): 正規表示式
2019-04-26
JS筆記
JS正規表示式的驗證
2022-03-19
JS
JS 活學活用正規表示式
2018-02-12
JS
關於JS的正規表示式
2018-04-24
JS
JS之正規表示式詳解
2017-09-21
JS
過目不忘 JS 正規表示式
2016-07-14
JS