JavaScript中正則表達式的使用

注意點:正則是使用到字符串上的,在javascript弱語言中有時候你可能會使用到數字的時候,注意也要轉換成字符串

1、定義正則的方式

• 一、簡單直接的定義方式(經常使用這種方式)

  var reg = /javascript/gi
  複製代碼

• 二、使用對象方式建立一個正則(這種方式的使用建立要匹配的內容是一個變量)

  var reg = new RegExp('javascript', gi)
  複製代碼

2、元字符的認識

• 一、具備特殊意義的元字符
  • \：轉義字符，轉義後面字符所表明的含義
  • ^：以某一個元字符開始
  • $：以某一個元字符結束
  • \n：匹配一個換行符
  • . ：除了\n之外的任意字符
  • \o：NUL字符(\u0000)
  • \t：製表符(\u0009)
  • \v：垂直製表符(\u000B)
  • \f：換頁符(\u000C)
  • \r：回車符(\u000D)
• 二、表明出現次數的量詞元字符
  • *：出現0到屢次
  • +：出現1到屢次
  • ?：出現0次或者1次(或取消捕獲時候的貪婪性)
  • {n}：出現n次
  • {n,m}：出現n到m次

3、修飾符的認識

• x|y：x或y中的一個
• [xyz]：x或y或z中的一個
• [^xyz]：除了xyz之外的任意一個字符
• [a-z]：a-z之間的任何一個字符
• [^a-z]：除了a-z之間的任何一個字符
• \d：一個0~9之間的數字
• \D：除了0~9之間的數字之外的任何字符
• \b：一個邊界符
• \w：數字、字母、下劃線中的任意一個字符
• \s：匹配一個空白字符、空格
• ()：分組，把一個大正則自己劃分紅幾個小的正則，例如：var reg = /^(\d+)zhufeng(\d+)$/;

4、幾個修飾符

• 一、g表示全局匹配
• 二、i表示忽視大小寫
• 三、m表示能夠多行匹配

5、[]的使用

• 一、在中括號中出現的全部的字符都是表明自己的意思的字符（沒有特殊含義）

  var reg = /[.]/ //匹配到.
  var reg = /\./  //匹配到.
  複製代碼

• 二、表示任意一個字符

  var reg = /[xyz]/ // 表示匹配x或y或者z
  var reg = /[a-zA-Z]/ // 表示a-z或者A-Z中任意一個
  複製代碼

• 三、中括號不識別兩位數

  var reg = /^[12]$/; // --> 1或者2中的一個（符合[xyz]）
  var reg = /^[12-68]$/; // --> 一、2-6中的一個、8 三個中的一個
  var reg = /^[\d]+$/; // 表示匹配一個或者多少數字
  複製代碼

• 四、取反操做

  var reg = /[^abc]/; // 表示除了abc其它的字符
  複製代碼

6、()的做用(相似數學同樣的改變運算的優先級)

• 一、分組的使用

  var reg = /^18|19$/; // 1八、1九、18一、18九、11九、81九、1819這些都符合
  var reg = /^(18|19)$/; // 只能18或者19
  複製代碼

7、正則中幾個重要的方法

• 一、test方法用於測試給定的字符串是否符合條件,返回true或者false

  var reg = /[x|y]/
  reg.test('|')
  複製代碼

• 二、match把全部和正則匹配的字符都獲取到(簡單理解就是提取內容)

  var str = 'hello JAVA and javascript';
  str.match(/java/gi); // 返回["JAVA", "java"]
  複製代碼

• 三、exec匹配(一步一步的執行)

  會返回一個Array，第一個元素是匹配到的元素,第二個元素是匹配到的元素在字符串中的位置,第三個元素是整個字符串,若是沒有匹配到就返回null

  var str = 'hello JAVA and javascript';
  var reg = /java/gi;
  reg.exec(str); // 返回["JAVA", index: 6, input: "hello JAVA and javascript"]
  reg.exec(str); // 返回["java", index: 15, input: "hello JAVA and javascript"]
  reg.exec(str); // 返回null
  複製代碼

• 四、split切割(也許你會說字符串自己就有split合併用正則的split)

  'a b c'.split(' '); // 返回["a", "b", "", "", "c"]
  'a,b, c d'.split(/[\s\,]+/); // 返回["a", "b", "c", "d"]
  **下面這個是我項目中使用到了,文字高亮**
  var str = 'helloJAVAandjavascript';
  str.split(/(java)/gi); // 返回["hello", "JAVA", "and", "java", "script"],而後再利用標籤拼接
  複製代碼

• 五、replace替換,在字符串中也提供了一個相同的方法

  • 使用字符串的替換

    var str = 'iceman2016iceman2017';
    str.replace('iceman','shoushou');
    複製代碼

  • 使用正則的替換

    var str = 'iceman2016iceman2017';
    str.replace(/iceman/g, 'shoushou');
    複製代碼

  • 第二個參數還能夠是函數

    var str = 'iceman2016iceman2017';
    str.replace(/iceman/g, function () {
        // 第一個參數是正則匹配到的,
        // 第二個參數是若是有分組就是匹配到分組的,若是沒有分組匹配到的字符在整個字符中的index
        // 第三個參數是原來的字符
        // 第一次執行匿名函數輸出arguments的結果：["iceman", 0, "iceman2016iceman2017"]
        // 第二次執行匿名函數輸出arguments的結果：["iceman", 10, "iceman2016iceman2017"]
        console.log(arguments);
        return 'shoushou';
    });
    複製代碼

  • 關於replace第二個參數的說明

    var str = 'he12llo wo21rd';
    str.replace(/o/g, function (all, letter,) {
      console.log(all)
      console.log('====',letter) // 返回是6，9
    });
    複製代碼

    var str = 'he12llo wo21rd';
    str.replace(/(o)/g, function (all, letter,) {
      console.log(all)
      console.log('====',letter) // 返回是o, o
    });
    複製代碼

  • replace的使用案例(轉換爲駝峯命名)

    var s1 = 'foo-style-css';
    s1 = s1.replace(/-(\w)/g, function (all, letter) {
      return letter.toUpperCase();
    })
    複製代碼

• 六、search搜索方法,搜索到匹配的內容返回下標,不然返回-1

  var str = 'hello JAVA and javascript';
  str.search(/java/i);
  複製代碼

8、關於$1....$9的認識

• 一、()在正則中表示分組的意思

• 二、$就是表示分組後的佔位符,其中0...9表示分組後的序列號

• 三、$1...$9要和()分組結合起來使用

• 四、使用案例

  var s="abcdefghijklmn";
  var reg = /(a)(b)(c)(d)(e)(f)(g)(h)(i)(j)(k)(l)(m)(n)/gi;
  var result = s.replace(reg, '$1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14');
  // 返回結果:'a,b,c,d,e,f,g,h,i,j,k,l,m,n'
  複製代碼

• 五、駝峯改成中劃線

  export const splitStr = (str) => str ? str.replace(/([A-Z])/g," $1").toLowerCase() : '';
  複製代碼

9、部分案例

• 一、匹配身份證號碼

  var reg = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X)$/;
  var str = "350324202904190216";
  str.match(reg)
  複製代碼

• 二、把數字轉換爲大寫數字

  var ary = ['零', '壹', '貳', '叄', '肆', '伍', '陸','柒', '捌', '玖', '拾'];
  '200801'.replace(/\d/g, (args1, args2, args3) => {
      // 第一個參數的匹配到的數字,第二個參數是匹配到的index,第三個參數的整個字符串
  	console.log(args1, args2, args3)
  	return ary[args1]
  })
  複製代碼

• 三、英文首字母大寫

  var str = 'hello word';
  str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
  複製代碼

• 四、匹配空字符

  var reg = /^$/
  reg.test(''); // 返回true
  複製代碼

• 五、匹配一個字符或者空格開始

  var reg = /(^|\\s)(|\\s$)/;
  複製代碼

• 六、貨幣千分位

  const currency = (str) => str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  複製代碼

10、擴展點

• 一、文本框須要輸入特殊字符

  '.*'.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
  // 輸出結果:"\.\*"
  複製代碼