javascript正則表達式RegExp再次研究-replace

原文連接

昨天說了幾個RegExp的幾個實例屬性

• global 標示正則表達式是否指定了全局模式g（只讀）
• ignoreCase 標示正則表達式是否指定了不區分大小寫模式i（只讀）
• mutiline 標示正則表達式是否指定了多行模式m（只讀）
• lastIndex 若是使用了全局模式，這個變量保存的是在字符串中嘗試下次的匹配的偏移值，在test()和exec()中會用到這個值（可寫）
• source 返回建立RegExp對象實例時指定的表達式文本字符串。（只讀）

雖然有那麼多屬性，可是基本用不到，爲何呢?由於這些信息都包含在模式聲明中了：
字面量建立的正則

var reg = /\[abc\]de/i
console.log(reg.global);//=>false
console.log(reg.ignoreCase);//=>true
console.log(reg.multiline);//=>false
console.log(reg.lastIndex);//=>0
console.log(reg.source);//=>\[abc\]de

經過RegExp構造函數建立的也是同樣的結果

var reg2 = new RegExp("\\[bc\\]at","i")
  console.log(reg2.global);//=>false
  console.log(reg2.ignoreCase);//=>true
  console.log(reg2.multiline);//=>false
  console.log(reg2.lastIndex);//=>0
  console.log(reg2.source);//=>\[abc\]de

replace

說到正則表達式，不得不提replace
stringObject.replace(regexp/substr,replacement)

1. 參數1：能夠是字符串，也能夠是正則表達式
2. 參數2：能夠是字符串，也能夠是函數。若是它是字符串，那麼每一個匹配都將由字符串替換。可是 replacement 中的 $ 字符具備特定的含義。以下表所示，它說明從模式匹配獲得的字符串將用於替換。

返回一個新的字符串，是用 參數2 替換了 參數1 的第一次匹配或全部匹配以後獲得的。

• $一、$二、...、$99 與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。
• $& 與 regexp 相匹配的子串。
• $` 位於匹配子串左側的文本。
• $' 位於匹配子串右側的文本。
• $$ 直接量符號。

replace例一：匹配一次，區分大小寫

var aStr = "Hello 陌上寒!"
    var bStr = aStr.replace("陌上寒", "正則表達式")
    console.log( bStr)//=>Hello 正則表達式!

replace例二：全局匹配

var cStr =`你好 陌上寒! 我是陌上寒，咱們一塊兒來交流討論前端，天天更新，歡迎關注`
    var dStr = cStr.replace(/陌上寒/g, "moshanghan")
    console.log(dStr)//=>你好 moshanghan! 
     //=>我是moshanghan，咱們一塊兒來交流討論前端，天天更新，歡迎關注

replace例三：忽略大小寫，匹配一次

var cStr ="我是 Moshanghan! moshanghan是我"
var dStr = cStr.replace(/moshanghan/i, "陌上寒")
console.log(dStr)//=>我是 陌上寒! moshanghan是我

replace例四：忽略大小寫，全局匹配

var cStr ="我是 Moshanghan! moshanghan是我"
var dStr = cStr.replace(/moshanghan/ig, "陌上寒")
console.log(dStr)//=>我是 陌上寒! 陌上寒是我

加點難度
replace例五：hello, moshanghan轉換爲moshanghan hello
如下的輸出是相同的

var name = "hello, moshanghan";
var a = name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1");
console.log(a);//=>moshanghan hello
var b = name.replace(/(\w+)\s*, (\w+)\s*/, "$2 $1");
console.log(b);//=>moshanghan hello
var c = name.replace(/(\w+), (\w+)/, "$2 $1");
console.log(c);//=>moshanghan hello
var d = name.replace(/(\w*), (\w*)/, "$2 $1");
console.log(d);//=>moshanghan hello

replace例六:

var name = `"a", "b"," dd"`;
var aa = name.replace(/"([^"]*)"/, "'$1'");
console.log(aa); //=>'a', "b"," dd"
console.log(/"([^"]*)"/g.test(name));

replace例七:

var name = 'aaa bbb ccc';
var uw = name.replace(/\b\w+\b/g, function (word) {
    return word.substring(0, 1).toUpperCase() + word.substring(1);
});
console.log(uw); //Aaa Bbb Ccc

要理解上面的，有幾個關於正則的概念須要知道

分組

下面的正則表達式能夠匹配kidkidkid：

var b =/kidkidkid/
console.log(b.test('kidkidkid')); //=>true

而另外一種更優雅的寫法是：

var b =/(kid){3}/
console.log(b.test('kidkidkid')); //=>true

這裏由圓括號包裹的一個小總體稱爲分組。

候選

一個分組中，能夠有多個候選表達式，用|分隔：

var reg = /I love (him|her|it)/;
console.log(reg.test('I love him'));//=>true
console.log(reg.test('I love her'));//=>true
console.log(reg.test('I love it'));//=>true
console.log(reg.test('I love them'));//=>false

捕獲與引用

被正則表達式匹配（捕獲）到的字符串會被暫存起來。其中，由分組捕獲的串會從1開始編號，因而咱們能夠引用這些串

var reg = /(\d{4})-(\d{2})-(\d{2})/
var date = '2010-04-12'
reg.test(date)
console.log(RegExp.$1);//=>2010
console.log(RegExp.$2);//=>04
console.log(RegExp.$3);//=>12

$1引用了第一個被捕獲的串，$2是第二個，依次類推。

嵌套分組的捕獲

若是碰到相似/((我) 就 (是 (陌上寒)))/的嵌套分組，捕獲的順序是什麼？來試試：

var reg = /((我) 就 (是 (陌上寒)))/
var str = "我 就 是 陌上寒"
reg.test( str ) // true
console.log(RegExp.$1);//=>我 就 是 陌上寒
console.log(RegExp.$2);//=>我
console.log(RegExp.$3);//=>是 陌上寒
console.log(RegExp.$4);//=>陌上寒

規則是以左括號「（」出現的順序進行捕獲。

昨日回顧
從今天起開啓對正則表達式的學習
參考連接
JavaScript正則表達式的分組匹配詳解
JavaScript replace() 方法