JS 中的正則

一般在哪裏用得到正則?

  1. RegExp.prototype.test()

    test() 方法執行一個檢索，用來查看正則表達式與指定的字符串是否匹配。返回 true 或 false。

    function test(str: string): boolean;

    若正則對象帶了全局標誌符號時，test() 的執行會改變正則表達式的 lastIndex 屬性。連續執行 test() 方法，後續的執行將會從 lastIndex 處開始匹配字符串。

    var regex = /foo/g;
var str = 'foo bar foo bar';
console.log(regex.lastIndex); // 0  初始值爲 0
regex.test(str); // true
console.log(regex.lastIndex); // 3
regex.test(str); // true
console.log(regex.lastIndex); // 11
regex.test(str); // false
console.log(regex.lastIndex); // 0  匹配爲 false 後將 lastIndex 重置爲 0

  2. RegExp.prototype.exec()

    在一個指定字符串中執行一個搜索匹配。返回一個結果數組或 null。

    正常情況下，如果匹配成功，則返回一個數組，數組的第 0 項是匹配的所有字符串，第 1 項及以後的表示括號中的分組捕獲，index 表示匹配到的索引

    var regex = /b(a)r/;
var str = 'foo bar foo bar';
regex.exec(str); // [ 'bar', 'a', index: 4, input: 'foo bar foo bar', groups: undefined ]

    如果正則對象帶了全局標誌符號時，exec 的執行也可以被多次執行，只不過該正則對象的 lastIndex 會隨着改變。當匹配失敗後，exec() 方法返回 null，並將 lastIndex 重置爲 0 。

    var regex = /bar/g;
var str = 'foo bar foo bar';
console.log(regex.lastIndex); // 0
regex.exec(str); // [ 'bar', index: 4, input: 'foo bar foo bar', groups: undefined ]
console.log(regex.lastIndex); // 7
regex.exec(str); // [ 'bar', index: 12, input: 'foo bar foo bar', groups: undefined ]
console.log(regex.lastIndex); // 15
regex.exec(str); // null
console.log(regex.lastIndex); // 0

  3. String.prototype.search()

    search() 方法執行正則表達式和 String 對象之間的一個搜索匹配。

    該方法傳入一個正則表達式對象（若爲非正則表達式會隱式地轉換成正則表達式對象new RegExp(regexp)），返回正則表達式在字符串中首次匹配項的索引；否則，返回 -1。

    function search(reg: RegExp): number;

  4. String.prototype.match()

    檢索返回一個字符串匹配正則表達式的結果。

    如果未使用 g 標誌，則僅返回第一個完整匹配及其相關的捕獲組（Array）。在這種情況下，返回的項目將具有如下所述的其他屬性。

    var regex = /bar/;
var str = 'foo bar foo bar';
regex.exec(str); // [ 'bar', 'a', index: 4, input: 'foo bar foo bar', groups: undefined ]

    如果使用 g ，則將返回與完整正則表達式匹配的所有結果，但不會返回捕獲組。

    var regex = /bar/g;
var str = 'foo bar foo bar';
regex.exec(str); // [ 'bar', 'bar' ]

  5. String.prototype.replace

    返回一個由替換值（replacement）替換部分或所有的模式（pattern）匹配項後的新字符串。模式可以是一個字符串或者一個正則表達式，替換值可以是一個字符串或者一個每次匹配都要調用的回調函數。如果 pattern 是字符串，則僅替換第一個匹配項。

實際場景

命名方式的轉換

假如存在這樣一個對象 origin， 需要實現一個函數 format，將 origin 的下劃線鍵名轉換爲 target 的駝峯式鍵名：

// 待轉換的對象
var origin = {
  first_name: 'a',
  last_name: 'b',
  say_hi: function () {
    console.log('hi');
  },
  dream_to_be: 'teacher',
  best_friends: [
    {
      first_name: 'c',
      last_name: 'd',
      favorite_sport: 'basketball',
    },
    {
      first_name: 'e',
      last_name: 'f',
      say_hi: function () {
        console.log('hello');
      },
    },
  ],
};

// 期待轉換後的對象
var target = {
  firstName: 'a',
  lastName: 'b',
  sayHi: function () {
    console.log('hi');
  },
  dreamToBe: 'teacher',
  bestFriends: [
    {
      firstName: 'c',
      lastName: 'd',
      favoriteSport: 'basketball',
    },
    {
      firstName: 'e',
      lastName: 'f',
      sayHi: function () {
        console.log('hello');
      },
    },
  ],
};

// 需要實現的轉化函數
function format(origin) {}

實現思路：遍歷源對象的 key，用正則將其命名風格轉換過來，如果該 key 對應的 value 是個對象或數組則遞歸地遍歷它。

const formatKey = (key) => {
  return key.replace(/_(\w)/g, ($0, $1) => {
    return $1.toUpperCase();
  });
};
const isObject = (obj) => typeof obj === 'object' && obj !== null;
const format = (origin) => {
  if (isObject(origin)) {
    return Object.keys(origin).reduce((target, key) => {
      target[formatKey(key)] = format(origin[key]);
      return target;
    }, {});
  } else if (Array.isArray(origin)) {
    return origin.map(format);
  } else {
    return origin;
  }
};

金額千分位分割

這也是一個很常見的場景，給定一個較長字符串表示的金額，返回一個千分位分割的字符串。舉例：

//  待轉化的字符串
var originStr = '123456789.00';

// 期待轉換後的字符串
var targetStr = '123,456,789.00';

// 需要實現的轉化函數
function format(originStr) {}

寫這個正則需要了解位置匹配 (?=p) 和 (?!p)。(?=p)，其中 p 是一個子模式，即 p 前面的位置，或者說，該位置後面的字符要匹配 p。

比如 (?=l)，表示 "l" 字符前面的位置，例如：

var result = 'hello'.replace(/(?=l)/g, '#');
console.log(result);
// => "he#l#lo"

而 (?!p) 就是 (?=p) 的反面意思，比如：

var result = 'hello'.replace(/(?!l)/g, '#');
console.log(result);
// => "#h#ell#o#"

在本題中的具體實現：

function format(originStr) {
  var regex = /(?!^)(?=(\d{3})+\.)/g;
  return originStr.replace(regex, ',');
}

或者更爲直觀的：

function format(originStr) {
  var regex = /(\d)(?=(\d{3})+\.)/g;
  return originStr.replace(regex, '$1,');
}

模板字符串函數

實現類似 ES6 中模板字符串功能的函數，將字符串中特定分割的字符替換爲對象中對應的值。

//  輸入的字符串和對象
var originStr = 'Hello, ${name}, your grade is ${grade}.';
var obj = {
  name: 'Micah',
  grade: 90,
};

// 期待輸出的字符串
var targetStr = 'Hello, Micah, your grade is 90.';

// 需要實現的轉化函數
function format(originStr, obj) {}

用正則中捕獲組的技巧提取位於${和}的變量名，再將其與對象中的值替換：

function format(originStr, obj) {
  return originStr.replace(/\$\{(\w*)\}/g, (_, key) => {
    return obj[key];
  });
}

參考資料

  1. MDN RegExp

  2. MDN String

  3. 老姚 正則表達式

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/6QKe1zH-rG33SZUvJ9mhwQ

猜你喜歡