Regexper：https://regexper.com/
RegExp的兩種方式。兩種方式定義RegExp對象。
let reg = /[a-z]{3}/gmi;
let reg = /[a-z]{3}/g;
let reg = /[a-z]{3}/m;
let reg = /[a-z]{3}/i;g global 代表全局搜索。如果不添加，搜索到第一個匹配停止。
m Multi-Line 代表多行搜索。
i ignore case 代表大小寫不敏感，默認大小寫敏感。
let reg = new RegExp('\\bis\\b', 'g');因為JavaScript字符串中\屬于特殊字符，需要轉義。
正則表達式有兩種基本字符類型組成。
原義文本字符
元字符
表示原本意義上是什么字符，就是什么字符。
是在正則表達式中有特殊含義的非字母字符。 * + ? $ ^ . | \ ( ) { } [ ]
| 字符 | 含義 |
|---|---|
\t | 水平制表符 |
\v | 垂直制表符 |
\n | 換行符 |
\r | 回車符 |
\0 | 空字符 |
\f | 換頁符 |
\cX | 控制字符，與X對應的控制字符(Ctrl + X) |
類似于轉義字符。
使用元字符[]可以構建一個簡單的類。
所謂類是指符合某些特性的對象，一個泛指，而不是某個字符。
表達式[abc]把字符a或b或c歸為一類，表達式可以匹配這一類中的任意一個字符。
// replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。 'a1b2c3d4e5'.replace(/[abc]/g, '0'); //010203d4e5
我們想要替換不是abc中任意一個字符的字符。
// 元字符 ^ 創建一個 反向類/負向類 'abcdefg'.replace(/[^abc]/g, '0'); //abc0000
如果我們想要匹配數字0-9，那么我們可能會這樣寫[0123456789]。
如果我們想要匹配26個字母，那么我們可能會這樣寫[abcdefghijklmnopqrstuvwxyz]。
這樣略顯麻煩，所以才會有范圍類。
// 替換所有數字 'a1c2d3e4f5'.replace(/[0-9]/g, 'x'); //axcxdxexfx // 替換所有小寫字母 'a1c2d3e4f5'.replace(/[a-z]/g, 'x'); //x1x2x3x4x5 // []組成的類內部是可以連寫的。替換所有大小寫字母 'a1C2d3E4f5G6'.replace(/[a-zA-Z]/g, '*'); //*1*2*3*4*5*6
如果我想替換數字，并且連帶-符號也一起替換呢？
// 替換所有數字和橫杠 '2018-5-21'.replace(/[0-9-]/g, '*'); //*********
| 字符 | 等價類 | 含義 |
|---|---|---|
. | [^\r\n] | 除了回車、換行之外的所有字符 |
\d | [0-9] | 數字字符 |
\D | [^0-9] | 非數字字符 |
\s | [\t\n\x0B\r] | 空白符 |
\S | [^\t\n\x0B\r] | 非空白符 |
\w | [a-zA-Z_0-9] | 單詞字符(字母、數字、下劃線) |
\W | [^a-zA-Z_0-9] | 非單詞字符 |
替換一個 ab + 數字 + 任意字符 的字符串
// 寫法1 'ab0c'.replace(/ab[0-9][^\r\n]/g, 'TangJinJian'); //TangJianJian // 寫法2 'ab0c'.replace(/ab\d./g, 'TangJinJian'); //TangJianJian
| 字符 | 含義 |
|---|---|
^ | 以xxx開始（不在中括號內時的含義） |
$ | 以xxx結束 |
\b | 單詞邊界 |
\B | 非單詞邊界 |
我想替換的字符串，屬于那種只在開頭出現的。
'YuYan is a boy, YuYan'.replace(/^YuYan/g, 'TangJinJian'); //TangJinJian is a boy, YuYan
我想替換的字符串，屬于那種只在結尾出現的。
'YuYan is a boy, YuYan'.replace(/YuYan$/g, 'TangJinJian'); //YuYan is a boy, TangJinJian
單詞邊界例子。
// 替換所有is為0 'This is a man'.replace(/is/g, '0'); //Th0 0 a man // 替換所有is前面帶有單詞邊界的字符串 'This is a man'.replace(/\bis/g, '0'); //This 0 a man // 替換所有is前面沒有單詞邊界的字符串 'This is a man'.replace(/\Bis\b/g, '0'); //Th0 is a man
| 字符 | 含義 |
|---|---|
? | 出現零次或一次（最多出現一次） |
+ | 出現一次或多次（至少出現一次） |
* | 出現零次或多次（任意次） |
{n} | 出現n次 |
{n,m} | 出現n到m次 |
{n,} | 至少出現n次 |
我想替換字符串中連續出現10次的數字為*。
'1234567890abcd'.replace(/\d{10}/, '*'); //*abcd我想替換字符串中的QQ號碼。
'我的QQ是：10000'.replace(/[1-9][0-9]{4,}/, '19216811'); //我的QQ是：19216811有這樣的一種場景下的正則表達式，/\d{3,6}/該替換3個數字還是6個數字呢，4、5個數字？
// 貪婪模式會盡可能的往多的方面去匹配
'123456789'.replace(/\d{3,6}/, 'x'); //x789
'123456789'.replace(/\d+/, 'x'); //x
'123456789'.replace(/\d{3,}/, 'x'); //x如果我們想要最低限度的替換呢？
// 非貪婪模式使用 ? 盡可能的往少的方面去匹配
'12345678'.replace(/\d{3,6}?/g, 'x'); //xx78
'123456789'.replace(/\d{3,6}?/g, 'x'); //xxx因為有g標志，會匹配這段字符串里所有符合規則的字符串。
第一個規則/\d{3,6}?/g，12345678中有兩個符合條件的字符串，是123和456。所以替換結果是xx78。
第二個規則/\d{3,6}?/g，123456789中有三個符合條件的字符串，是123、456和789。所以替換結果是xxx。
我想替換連續出現3次的字母和數字。
//沒有分組的情況下，后面的量詞，只是表示匹配3次數字。
'a1b2d3c4'.replace(/[a-z]\d{3}/g, '*'); //a1b2d3c4
//有分組的情況下，分組后面的量詞，表示符合這個分組里規則的字符串，匹配3次。
'a1b2d3c4'.replace(/([a-z]\d){3}/g, '*'); //*c4分組里有兩種規則，只要滿足其中一種即可匹配。
//我想把ijaxxy和ijcdxy都替換成* 'ijabxyijcdxy'.replace(/ij(ab|cd)xy/g, '*'); //**
可以把分組視為變量，來引用。
//我想把改變年月日之間的分隔符
'2018-5-22'.replace(/(\d{4})-(\d{1,2})-(\d{1,2})/g, '$1/$2/$3'); //2018/5/22
//我想替換日期，并且更改順序
'2018-5-22'.replace(/(\d{4})-(\d{1,2})-(\d{1,2})/g, '$2/$3/$1'); //5/22/2018忽略掉分組，不捕獲分組，只需要在分組內加上?:
// 忽略掉匹配年的分組后，匹配月的分組變成了$1，日的分組變成了$2
'2018-5-22'.replace(/(?:\d{4})-(\d{1,2})-(\d{1,2})/g, '$1/$2/$3'); //5/22/$3肯定/正向匹配和否定/負向匹配。| 名稱 | 正則 | 含義 |
|---|---|---|
| 正向前瞻 | exp(?=assert) | |
| 負向前瞻 | exp(?!assert) | |
| 正向后顧 | exp(?<=assert) | JavaScript不支持 |
| 負向后顧 | exp(?<!assert) | JavaScript不支持 |
有這樣一個單詞字符+數字格式的字符串，只要滿足這種格式，就把其中的單詞字符替換掉。
'a1b2ccdde3'.replace(/\w(?=\d)/g, '*'); //*1*2ccdd*3
有這樣一個單詞字符+非數字格式的字符串，只要滿足這種格式，就把前面的單詞字符替換掉。
'a1b2ccdde3'.replace(/\w(?!\d)/g, '*'); //a*b*****e*
global是否全文搜索，默認false。 ignore case是否大小寫敏感，默認是false。 multiline多行搜索，默認值是false。 lastIndex是當前表達式匹配內容的最后一個字符的下一個位置。 source正則表達式的文本字符串。
let reg1 = /\w/; let reg2 = /\w/gim; reg1.global; //false reg1.ignoreCase; //false reg1.multiline; //false reg2.global; //true reg2.ignoreCase; //true reg2.multiline; //true
true或false。let reg1 = /\w/;
reg1.test('a'); //true
reg1.test('*'); //false加上g標志之后，會有些區別。
let reg1 = /\w/g;
// 第一遍
reg1.test('ab'); //true
// 第二遍
reg1.test('ab'); //true
// 第三遍
reg1.test('ab'); //false
// 第四遍
reg1.test('ab'); //true
// 第五遍
reg1.test('ab'); //true
// 第六遍
reg1.test('ab'); //false實際上這是因為RegExp.lastIndex。每次匹配到之后，lasgIndex會改變。 lastIndex是正則表達式的一個可讀可寫的整型屬性，用來指定下一次匹配的起始索引。
let reg = /\w/g;
// 每次匹配到，就會把lastIndex指向匹配到的字符串后一個字符的索引。
while(reg.test('ab')) {
console.log(reg.lastIndex);
}
// 1
// 2reg.lastIndex初始時為0，第一個次匹配到a的時候，reg.lastIndex為1。第二次匹配到b的時候，reg.lastIndex為2。
let reg = /\w\w/g;
while(reg.test('ab12cd')) {
console.log(reg.lastIndex);
}
// 2
// 4
// 6reg.lastIndex初始時為0，第一個次匹配到ab的時候，reg.lastIndex為2。第二次匹配到12的時候，reg.lastIndex為4。第三次匹配到cd的時候，reg.lastIndex為6。
let reg = /\w/g;
// 匹配不到符合正則的字符串之后，lastIndex會變為0。
while(reg.test('ab')) {
console.log(reg.lastIndex);
}
console.log(reg.lastIndex);
reg.test('ab');
console.log(reg.lastIndex);
// 1
// 2
// 0
// 1所以，這就是為什么reg.test('ab')再多次執行之后，返回值為false的原因了。
let reg = /\w/g;
reg.lastIndex = 2;
reg.test('ab'); //false每次匹配的起始位置，是以lastIndex為起始位置的。上述例子，一開始從位置2開始匹配，位置2后面沒有符合正則的字符串，所以為false。
null。let reg = /\d(\w)\d/; let ts = '*1a2b3c'; let ret = reg.exec(ts); //ret是結果數組 // reg.lastIndex肯定是0，因為沒有g標志。 沒有g標志的情況下，lastIndex被忽略。 console.log(reg.lastIndex + '\t' + ret.index + '\t' + ret.toString()); console.log(ret); // 0 1 1a2,a // ["1a2", "a"]
返回數組是有以下元素組成的：
第一個元素是與正則表達式相匹配的文本。
第二個元素是reg對象的第一個子表達式相匹配的文本（如果有的話）。
第二個元素是reg對象的第二個子表達式相匹配的文本（如果有的話），以此類推。
// 子表達式就是分組。 let reg = /\d(\w)(\w)(\w)\d/; let ts = '*1a2b3c'; let ret = reg.exec(ts); console.log(reg.lastIndex + '\t' + ret.index + '\t' + ret.toString()); console.log(ret); //
let reg = /\d(\w)(\w)(\w)\d/g;
let ts = '*1abc25def3g';
while(ret = reg.exec(ts)) {
console.log(reg.lastIndex + '\t' + ret.index + '\t' + ret.toString());
}
// 6 1 1abc2,a,b,c
// 11 6 5def3,d,e,f第一次匹配的是1abc2，1abc2的后一個字符的起始位置是6，所以reg.lastIndex是6。 1abc2的第一個字符的起始位置是1，所以ret.index是1。
第二次匹配的是5def3，5def3的后一個字符的起始位置是11，所以reg.lastIndex是11。 5def3的第一個字符的起始位置是6，所以ret.index是6。
String對象之間的一個搜索匹配。 index，搜索不到返回-1。 g標志，并且總是從字符串的開始進行檢索。我想知道Jin字符串的起始位置在哪里。
'TangJinJian'.search('Jin'); //4
'TangJinJian'.search(/Jin/); //4search方法，既可以通過字符串，也可以通過正則描述字符串來搜索匹配。
match()方法檢索匹配項。 RegExp對象參數是否具有g標志，對結果影響很大。如果RegExp沒有g標志，那么match只能在字符串中，執行一次匹配。
如果沒有找到任何匹配文本，將返回null。
否則將返回一個數組，其中存放了與它找到的匹配文本有關的信息。
let reg = /\d(\w)\d/; let ts = '*1a2b3c'; let ret = ts.match(reg); console.log(ret.index + '\t' + reg.lastIndex); console.log(ret); // 1 0 // ["1a2", "a"]
非全局情況下和RegExp.prototype.exec()方法的效果是一樣的。
我想找到所有數字+單詞+數字格式的字符串。
let reg = /\d(\w)\d/g; let ts = '*1a2b3c4e'; let ret = ts.match(reg); console.log(ret.index + '\t' + reg.lastIndex); console.log(ret); // undefined 0 // ["1a2", "3c4"]
全局情況下和RegExp.prototype.exec()方法的區別。在于，沒有了分組信息。
如果我們不使用到分組信息，那么使用String.prototype.match()方法，效率要高一些。而且不需要寫循環來逐個所有的匹配項獲取。
String對象分割成字符串數組。'a,b,c,d'.split(/,/); //["a", "b", "c", "d"] 'a1b2c3d'.split(/\d/); //["a", "b", "c", "d"] 'a1b-c|d'.split(/[\d-|]/); //["a", "b", "c", "d"]
'TangJinJian'.replace('Tang', ''); //JinJian
'TangJinJian'.replace(/Ji/g, '*'); //Tang*n*an以上兩種用法，是最常用的，但是還不能精細化控制。
我想要把a1b2c3d4中的數字都加一，變成a2b3c4d5。
'a1b2c3d4'.replace(/\d/g, function(match, index, orgin) {
console.log(index);
return parseInt(match) + 1;
});
// 1
// 3
// 5
// 7
// a2b3c4d5回調函數有以下參數：
match第一個參數。匹配到的字符串。
group第二個參數。分組，如果有n個分組，則以此類推n個group參數，下面兩個參數將變為第2+n和3+n個參數。沒有分組，則沒有該參數。
index第三個參數。匹配到的字符串第一個字符索引位置。
orgin第四個參數。源字符串。
我想把兩個數字之間的字母去掉。
'a1b2c3d4e5f6'.replace(/(\d)(\w)(\d)/g, function(match, group1, group2, group3, index, orgin) {
console.log(match);
return group1 + group3;
});
// 1b2
// 3d4
// 5f6
// a12c34e56相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！推薦閱讀：
react實現選中li高亮步驟詳解
前端中排序算法實例詳解
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.polareal.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
