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