/正則表達式主體/修飾符(可選)

'@abc2018'.match(/@([a-z]+)([A-Z]+)?/);
// ["@abc", "abc", undefined, index: 0, input: "@abc2018", groups: undefined]

'@abc2018'.match(/@(?<lowerCase>[a-z]+)(?<upperCase>[A-Z]+)?/);
// ["@abc", "abc", undefined, index: 0, input: "@abc2018", groups: { lowerCase: "abc", upperCase: undefined }]

'@abc3-xyz-$abc5'.replace(/([^-]+)abc(\d+)/g, (match, $1, $2) => `{${$1}${match}${$2}}`);
// <a href="mailto:{@@abc33}-xyz-{$$abc55}">{@@abc33}-xyz-{$$abc55}</a>

'@abc-xyz-$abc'.replace(/([^-]+)abc/g, (match, $1, index) => `{${match}是位置是${index}}`);

'abc-xyz'.replace(/abc/g, (match, index, string) => `{{${match}}屬于{${string}}}`);
// "{{abc}屬于{abc-xyz}}-xyz"

'<p>hello regex</p>'.replace(/</g, '<').replace(/>/g, '>');
// "<p>hello regex</p>"

'abc-def_mno+xyz'.split();
// ["abc-def_mno+xyz"]
'abc-def_mno+xyz'.split('-_+');
// ["abc-def_mno+xyz"]
'abc-def_mno+xyz'.split('');
// ["a", "b", "c", "-", "d", "e", "f", "_", "m", "n", "o", "+", "x", "y", "z"]
'abc-def_mno+xyz'.split(/[-_+]/);
// ["abc", "def", "mno", "xyz"]
'abc-def_mno+xyz'.split(/[-_+]/g);
// ["abc", "def", "mno", "xyz"]
'abc-def_mno+xyz'.split(/[-_+]/, 3);
// ["abc", "def", "mno"]
'abc-def_mno+xyz'.split(/[-_+]/, 5);
// ["abc", "def", "mno", "xyz"]

什么

正則表達式是一種用來匹配字符串的強有力的武器

它的設計思想是用一種描述性的語言定義一個規則，凡是符合規則的字符串，我們就認為它“匹配”了，否則，該字符串就是不合法的

根據正則表達式語法規則，大部分字符僅能夠描述自身，這些字符被稱為普通字符，如所有的字母、數字等。

元字符就是擁有特動功能的特殊字符，大部分需要加反斜杠進行標識，以便于普通字符進行區別，而少數元字符，需要加反斜杠，以便轉譯為普通字符使用。JavaScript 正則表達式支持的元字符如表所示。

在 JavaScript中，正則表達式也是對象，構建正則表達式有兩種方式：

1. 字面量創建，其由包含在斜杠之間的模式組成

const re = /\d+/g;

2. 調用RegExp對象的構造函數

const re = new RegExp("\\d+","g");

const rul = "\\d+"
const re1 = new RegExp(rul,"g");

使用構建函數創建，第一個參數可以是一個變量，遇到特殊字符\需要使用\進行轉義

表示字符的方法有多種，除了可以直接使用字符本身外，還可以使用 ASCII 編碼或者 Unicode 編碼來表示。

示例1

下面使用 ASCII 編碼定義正則表達式直接量。

var r = /\x61/;var s = "JavaScript";var a = s.match(s);

由于字母 a 的 ASCII 編碼為 97，被轉換為十六進制數值后為 61，因此如果要匹配字符 a，就應該在前面添加“\x”前綴，以提示它為 ASCII 編碼。

示例2

除了十六進制外，還可以直接使用八進制數值表示字符。

var r = /1/;var s = "JavaScript";var a = s.match(r);

使用十六進制需要添加“\x”前綴，主要是為了避免語義混淆，而八進制則不需要添加前綴。

示例3

ASCII 編碼只能夠匹配有限的單字節字符，使用 Unicode 編碼可以表示雙字節字符。Unicode 編碼方式：“\u”前綴加上 4 位十六進制值。

var r = "/\u0061/";var s = "JavaScript";var a = s.match(s);

在 RegExp() 構造函數中使用元字符時，應使用雙斜杠。

var r = new RegExp("\u0061"); 

RegExp() 構造函數的參數只接受字符串，而不是字符模式。在字符串中，任何字符加反斜杠還表示字符本身，如字符串“\u”就被解釋為 u 本身，所以對于“\u0061”字符串來說，在轉換為字符模式時，就被解釋為“u0061”，而不是“\u0061”，此時反斜杠就失去轉義功能。解決方法：在字符 u 前面加雙反斜杠。

匹配規則

常見的校驗規則如下：

正則表達式標記

使用方法如下：

var re = /pattern/flags;
var re = new RegExp("pattern", "flags");

在了解下正則表達式基本的之外，還可以掌握幾個正則表達式的特性：

貪婪模式

在了解貪婪模式前，首先舉個例子：

const reg = /ab{1,3}c/

在匹配過程中，嘗試可能的順序是從多往少的方向去嘗試。首先會嘗試bbb，然后再看整個正則是否能匹配。不能匹配時，吐出一個b，即在bb的基礎上，再繼續嘗試，以此重復

如果多個貪婪量詞挨著，則深度優先搜索

const string = "12345";
const regx = /(\d{1,3})(\d{1,3})/;
console.log( string.match(reg) );
// => ["12345", "123", "45", index: 0, input: "12345"]

其中，前面的\d{1,3}匹配的是"123"，后面的\d{1,3}匹配的是"45"

懶惰模式

惰性量詞就是在貪婪量詞后面加個問號。表示盡可能少的匹配

var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]

其中\d{1,3}?只匹配到一個字符"1"，而后面的\d{1,3}匹配了"234"

分組

分組主要是用過()進行實現，比如beyond{3}，是匹配d字母3次。而(beyond){3}是匹配beyond三次

在()內使用|達到或的效果，如(abc | xxx)可以匹配abc或者xxx

反向引用，巧用$分組捕獲

let str = "John Smith";

// 交換名字和姓氏
console.log(str.replace(/(john) (smith)/i, '$2, $1')) // Smith, John

匹配方法

正則表達式常被用于某些方法，我們可以分成兩類：

• 字符串（str）方法：match、matchAll、search、replace、split
• 正則對象下（regexp）的方法：test、exec

str.match(regexp)

str.match(regexp) 方法在字符串 str 中找到匹配 regexp 的字符

如果 regexp 不帶有 g 標記，則它以數組的形式返回第一個匹配項，其中包含分組和屬性 index（匹配項的位置）、input（輸入字符串，等于 str）

let str = "I love JavaScript";

let result = str.match(/Java(Script)/);

console.log( result[0] );     // JavaScript（完全匹配）
console.log( result[1] );     // Script（第一個分組）
console.log( result.length ); // 2

// 其他信息：
console.log( result.index );  // 7（匹配位置）
console.log( result.input );  // I love JavaScript（源字符串）

如果 regexp 帶有 g 標記，則它將所有匹配項的數組作為字符串返回，而不包含分組和其他詳細信息

let str = "I love JavaScript";

let result = str.match(/Java(Script)/g);

console.log( result[0] ); // JavaScript
console.log( result.length ); // 1

如果沒有匹配項，則無論是否帶有標記 g ，都將返回 null

let str = "I love JavaScript";

let result = str.match(/HTML/);

console.log(result); // null

str.matchAll(regexp)

返回一個包含所有匹配正則表達式的結果及分組捕獲組的迭代器

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

str.search(regexp)

返回第一個匹配項的位置，如果未找到，則返回 -1

let str = "A drop of ink may make a million think";

console.log( str.search( /ink/i ) ); // 10（第一個匹配位置）

這里需要注意的是，search 僅查找第一個匹配項

str.replace(regexp)

替換與正則表達式匹配的子串，并返回替換后的字符串。在不設置全局匹配g的時候，只替換第一個匹配成功的字符串片段

const reg1=/javascript/i;
const reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));
//hello js Javascript Javascript
console.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));
//hello js js js

str.split(regexp)

使用正則表達式（或子字符串）作為分隔符來分割字符串

console.log('12, 34, 56'.split(/,\s*/)) // 數組 ['12', '34', '56']

#regexp.exec(str)

regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配項，與以前的方法不同，它是在正則表達式而不是字符串上調用的

根據正則表達式是否帶有標志 g，它的行為有所不同

如果沒有 g，那么 regexp.exec(str) 返回的第一個匹配與 str.match(regexp) 完全相同

如果有標記 g，調用 regexp.exec(str) 會返回第一個匹配項，并將緊隨其后的位置保存在屬性regexp.lastIndex 中。 下一次同樣的調用會從位置 regexp.lastIndex 開始搜索，返回下一個匹配項，并將其后的位置保存在 regexp.lastIndex 中

let str = 'More about JavaScript at https://javascript.info';
let regexp = /javascript/ig;

let result;

while (result = regexp.exec(str)) {
  console.log( `Found ${result[0]} at position ${result.index}` );
  // Found JavaScript at position 11
  // Found javascript at position 33
}

regexp.test(str)

查找匹配項，然后返回 true/false 表示是否存在

let str = "I love JavaScript";

// 這兩個測試相同
console.log( /love/i.test(str) ); // true

應用場景

通過上面的學習，我們對正則表達式有了一定的了解

下面再來看看正則表達式一些案例場景：

驗證QQ合法性（5~15位、全是數字、不以0開頭）：

const reg = /^[1-9][0-9]{4,14}$/
const isvalid = patrn.exec(s)

校驗用戶賬號合法性（只能輸入5-20個以字母開頭、可帶數字、“_”、“.”的字串）：

var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
const isvalid = patrn.exec(s)

將url參數解析為對象

const protocol = '(?<protocol>https?:)';
const host = '(?<host>(?<hostname>[^/#?:]+)(?::(?<port>\\d+))?)';
const path = '(?<pathname>(?:\\/[^/#?]+)*\\/?)';
const search = '(?<search>(?:\\?[^#]*)?)';
const hash = '(?<hash>(?:#.*)?)';
const reg = new RegExp(`^${protocol}\/\/${host}${path}${search}${hash}$`);
function execURL(url){
    const result = reg.exec(url);
    if(result){
        result.groups.port = result.groups.port || '';
        return result.groups;
    }
    return {
        protocol:'',host:'',hostname:'',port:'',
        pathname:'',search:'',hash:'',
    };
}

console.log(execURL('https://localhost:8080/?a=b#xxxx'));
protocol: "https:"
host: "localhost:8080"
hostname: "localhost"
port: "8080"
pathname: "/"
search: "?a=b"
hash: "#xxxx"

再將上面的search和hash進行解析

function execUrlParams(str){
    str = str.replace(/^[#?&]/,'');
    const result = {};
    if(!str){ //如果正則可能配到空字符串，極有可能造成死循環，判斷很重要
        return result; 
    }
    const reg = /(?:^|&)([^&=]*)=?([^&]*?)(?=&|$)/y
    let exec = reg.exec(str);
    while(exec){
        result[exec[1]] = exec[2];
        exec = reg.exec(str);
    }
    return result;
}
console.log(execUrlParams('#'));// {}
console.log(execUrlParams('##'));//{'#':''}
console.log(execUrlParams('?q=3606&src=srp')); //{q: "3606", src: "srp"}
console.log(execUrlParams('test=a=b=c&&==&a='));//{test: "a=b=c", "": "=", a: ""}

ECMAScript正則表達式6個最新特性

1. dotAll模式(s選項)

這個特性已經在ECMAScript 2018正式發布了。

默認情況下，.可以匹配任意字符，除了換行符:

/foo.bar/u.test('foo\nbar'); // false

另外，.不能匹配Unicode字符，需要使用u選項啟用Unicode模式才行。

ES2018引入了dotAll模式，通過s選項可以啟用，這樣，.就可以匹配換行符了。

/foo.bar/su.test('foo\nbar'); // true

2. Lookbehind斷言

這個特性已經在ECMAScript 2018正式發布了。

ECMAScript目前僅支持lookahead斷言。

下面示例是Positive lookahead，匹配字符串“42 dollars”中緊跟著是”dollars”的數字：

const pattern = /\d+(?= dollars)/u;
const result = pattern.exec('42 dollars');
console.log(result[0]); // 打印42

下面示例是Negative lookahead，匹配字符串“42 pesos”中緊跟著的不是”dollars”的數字:

const pattern = /\d+(?! dollars)/u;
const result = pattern.exec('42 pesos');
console.log(result[0]); // 打印42

ES2018添加了lookbehind斷言。

下面示例是Positive lookbehind，匹配字符串“”中前面是”$”的數字:

const pattern = /(?<=\$)\d+/u;
const result = pattern.exec('$42');
console.log(result[0]); // 打印42

下面示例是Negative lookbehind，匹配字符串“”中前面不是是”$”的數字:

const pattern = /(?<!\$)\d+/u;
const result = pattern.exec('€42');
console.log(result[0]); // 打印42

Fundebug專注于網頁、微信小程序、微信小游戲，支付寶小程序，React Native，Node.js和Java線上BUG實時監控，歡迎免費試用

3. Named capture groups

這個特性已經在ECMAScript 2018正式發布了。

目前，正則表達式中小括號匹配的分組是通過數字編號的：

const pattern = /(\d{4})-(\d{2})-(\d{2})/u;
const result = pattern.exec('2017-01-25');
console.log(result[0]); // 打印"2017-01-25"
console.log(result[1]); // 打印"2017"
console.log(result[2]); // 打印"01"
console.log(result[3]); // 打印"25"

這樣很方便，但是可讀性很差，且不易維護。一旦正則表達式中小括號的順序有變化時，我們就需要更新對應的數字編號。

ES2018添加named capture groups, 可以指定小括號中匹配內容的名稱，這樣可以提高代碼的可讀性，也便于維護。

const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
const result = pattern.exec('2017-01-25');
console.log(result.groups.year); // 打印"2017"
console.log(result.groups.month); // 打印"01"
console.log(result.groups.day); // 打印"25"

4. Unicode property escapes

這個特性已經在ECMAScript 2018正式發布了。

Unicode標準為每一個字符分配了多個屬性。比如，當你要匹配希臘語字符時，則可以搜索Script_Extensions屬性為Greek的字符。

Unicode property escapes使得我們可以使用ECMAScript正則表達式直接匹配Unicode字符的屬性：

const regexGreekSymbol = /\p{Script_Extensions=Greek}/u;
console.log(regexGreekSymbol.test('π')); // 打印true

5. String.prototype.matchAll

這個特性還處在Stage 3 Draft

g和y選項通常用于匹配一個字符串，然后遍歷所有匹配的子串，包括小括號匹配的分組。String.prototype.matchAll讓這個操作變得更加簡單了。

const string = 'Magic hex numbers: DEADBEEF CAFE 8BADF00D';
const regex = /\b[0-9a-fA-F]+\b/g;
for (const match of string.matchAll(regex)) {
  console.log(match);
}

每一個迭代所返回的match對象與regex.exec(string)所返回的結果相同：

// Iteration 1:
[
  'DEADBEEF',
  index: 19,
  input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]
// Iteration 2:
[
  'CAFE',
  index: 28,
  input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]
// Iteration 3:
[
  '8BADF00D',
  index: 33,
  input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]

注意，這個特性還處在Stage 3 Draft，因此還存在變化的可能性，示例代碼是根據最新的提案寫的。另外，瀏覽器也還沒有支持這個特性。String.prototype.matchAll最快可以被加入到ECMAScript 2019中。

6. 規范RegExp遺留特性

這個提案還處在Stage 3 Draft

這個提案規范了RegExp的遺留特性，比如RegExp.prototype.compile方法以及它的靜態屬性從RegExp.到RegExp.。雖然這些特性已經棄用(deprecated)了，但是為了兼容性我們不能將他們去。因此，規范這些RegExp遺留特性是最好的方法。因此，這個提案有助于保證兼容性。

常用驗證

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

TS版

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor'];
  return valid_map.indexOf(str.trim()) >= 0;
}

/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg =
    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  return reg.test(url);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/;
  return reg.test(str);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/;
  return reg.test(str);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/;
  return reg.test(str);
}

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return reg.test(email);
}

/**
 * @param {string} phone
 * @returns {Boolean}
 */
export function validPhone(phone) {
  const reg = /^1[3-9][0-9]{9}$/;

  return reg.test(phone);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true;
  }
  return false;
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]';
  }
  return Array.isArray(arg);
}
// [修改]-新增-開始
/**
 * 英文驗證
 * @param min
 * @param max
 * @param value
 */
export function english(value: string, min = 6, max = 12): boolean {
  return new RegExp('^[a-z|A-Z]{' + min + ',' + max + '}$').test(value);
}

/**
 * 中文驗證
 * @param min
 * @param max
 * @param value
 */
export function chinese(value: string, min = 2, max = 12): boolean {
  return new RegExp('^[\u4e00-\u9fa5]{' + min + ',' + max + '}$').test(value);
}
/**
 * 非中文
 * @param value 內容
 * @returns boolean
 */
export function notChinese(value: string): boolean {
  return !/[\u4e00-\u9fa5]/.test(value);
}
/**
 * 必需數字
 * @param min
 * @param max
 * @param value
 */
export function number(value: string, min = 1, max = 20): boolean {
  return new RegExp('^d{' + min + ',' + max + '}$').test(value);
}
/**
 * 必需小數點最大值
 * @param min
 * @param max
 * @param value
 */
export function precision(value: string, max = 8, precision = 8): boolean {
  return new RegExp(
    '(^[0-9]{1,' + max + '}$)|(^[0-9]{1,' + max + '}[.]{1}[0-9]{1,' + precision + '}$)',
  ).test(value);
}
/**
 * 復雜密碼驗證
 * @param value
 */
export function pwd(value: string): boolean {
  if (value && value.length > 15) {
    const en = /[a-z]/.test(value);
    const num = /[0-9]/.test(value);
    const daxie = /[A-Z]/.test(value);
    const teshu = /[~!@#$%^&*()_+=-\[\]\\,.\/;':{}]/.test(value);
    return en && num && daxie && teshu;
  }
  return false;
}
// [修改]-新增-結束

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎