String.prototype.replace()
該方法作為字符串中非常常用的方法, 今天我們具體介紹一下它的用法
語法格式
someString.replace(regxp | substr, newStr | function)
第一個入參可以是正則或者是字符串, 如是字符串將不能設置忽略大小寫, 在匹配到結果后返回, 而不繼續匹配下去, 若是正則表達式則會按正則的意圖進行匹配;
第二個入參是新字符串或者是回調函數, 若是新字符串則會替換匹配到的字符串, 如果是函數則在每次匹配到結果時執行該函數並把函數的返回值替換匹配到的字符串;
該方法不會破壞原來的字符串, 而且帶有返回值, 返回的是一個部分或者全部由替代模式所取代的新的字符串, 以為有返回值, 所以支持鏈式調用;
第二個參數是字符串時
該字符串中可以插入以下特殊變量:
| 變量名 | 解釋 |
|---|---|
| $$ | 代表插入一個 $ |
| $& | 插入匹配的子串, 用來引用匹配到子串 |
| $` | 插入當前匹配到的子串左邊的內容 |
| $' | 插入當前匹配到的子串的右邊的內容 |
| $n | 如果第一個參數是正則, 並且 n 是個小於100的正整數, 那么插入第 n 個括號匹配的字符串 |
一些 Demo 如下:
let str = 'hello world';
str.replace('o', '$$'); // "hell$ world"
str.replace('o', '-$&-'); // "hell-o- world"
str.replace('o', '$`'); // "hellhell world"
str.replace('o', '$\''); // "hell world world"
str.replace(/(o)|(d)/g, '-$1-$2'); // "hell-o- w-o-rl--d", 這個結果大家好好用心理解
第二個參數是函數時
在這種情況下，當匹配執行后， 該函數就會執行。 函數的返回值作為替換字符串。 (注意: 上面提到的特殊替換參數在這里不能被使用。) 另外要注意的是， 如果第一個參數是正則表達式， 並且其為全局匹配模式， 那么這個方法將被多次調用， 每次匹配都會被調用。該函數的入參解釋:
| 函數入參位置 | 對應解釋 |
|---|---|
| match | 匹配到的字符串 |
| p1, p2, p3, ... | 同上 $1, $2, $3 |
| offset | 匹配到的字符串在原字符串中的偏移量 |
| string | 原字符串 |
該函數的精確參數取決於第一個參數是不是正則表達式, 以及該正則里指定了多少個括號子串
// 如果我們要把字符串中的單詞首字母大寫, 可以進行如下操作
let str = 'hello world',
reg = /(\w)(\w*)/g;
str.replace(reg, function(match, p1, p2, offset, str) {
console.log(match, p1, offset, str);
return p1.toUpperCase() + p2;
});
對於上面的函數中的入參大家可以打印一下看看, 並加以理解;
String.prototype.replace() 這個方法在字符串操作中使用非常頻繁, 同時也由於其相對復雜的入參組合導致該方法非常靈活, 我們看一看在我們項目中使用它的場景; 掩碼手機號 相信大家都做過, 我們看看使用 replace 如何實現:
// 假設我們有一個手機號
let tel = '13194099515',
res = '',
tmp = '****';
// 方法1:
res = tel.replace(/\d{4}(?=\d{4}$)/g, tmp); // 第一個參數是正則
// 方法2:
res = tel.replace(/(\d{3})(\d{4})/g, '$1' + tmp); // 第一個參數是正則
// 方法3:
res = tel.replace(tel.slice(3, -4), tmp); // 第一個參數是字符串
// 方法4:
res = tel.replace(/(\d{3})(\d{4})(\d{4})/g, function(match, p1, p2, p3) {
return p1 + tmp + p3;
});
相信應該還有別的可以使用 replace() 實現的途徑, 大家可以好好考慮一下;
小結
String.protype.replace() 方法使用比較靈活, 大家可以在項目中通過多使用來加深對它的理解和記憶, 一般對於簡單匹配, 第二個參數可以使用簡單字符串來操作, 如果要對替換控制的比較精細的話, 需要有一個比較清晰的正則做為第一個入參, 此時第二個入參可以使用回調函數進行精確控制。