javascript replace高階用法
摘要：
在前端與後臺互動的時候我們通常都需要將後臺傳遞的資料繫結到html中，這個繫結資料的方式我們通常是使用jQuery或者使用原生的innerHTML進行繫結，當然也可以使用artTemplate模板來繫結資料，那麼artTemplate模板它繫結資料的原理是什麼呢？其實它就是利用了replace...
在前端與後臺互動的時候我們通常都需要將後臺傳遞的資料繫結到html中，這個繫結資料的方式我們通常是使用jQuery或者使用原生的innerHTML進行繫結，當然也可以使用artTemplate模板來繫結資料，那麼artTemplate模板它繫結資料的原理是什麼呢？其實它就是利用了replace()方法。
對於正則replace約定了一個特殊標記符”$”：
1）、$i(i取值範圍1~99)：表示從左到右正則子表示式所匹配的文字
2）、$&：表示與正則表示式匹配的全部文字
3）、$`(`：1旁邊的那個鍵)：表示匹配字串的左邊文字
4）、$'('：單引號)：表示匹配字串的右邊文字
5）、$$：表示$轉移
1、replace基本用法
<script type="text/javascript">
/*要求將字串中所有的a全部用A代替*/
var str = "javascript is great script language!";
//只會將第一個匹配到的a替換成A
console.log(str.replace("a","A"));
//只會將第一個匹配到的a替換成A。因為沒有在全域性範圍內查詢
console.log(str.replace(/a/,"A"));
//所有a都被替換成了A
console.log(str.replace(/a/g,"A"));
</script>
1.1、replace基本用法之替換移除指定class類
<script type="text/javascript"> /*要求將下面這個元素中的unabled類移除掉*/ <div class=”confirm-btn unabled mb-10” id=”j_confirm_btn”>提交</div> var classname = document.getElementById(“j_confirm_btn”).className; /*(^|\\s)表示匹配字串開頭或字串前面的空格，(\\s|$)表示匹配字串結尾或字串後面的空格*/ var newClassName = classname.replace(/(^|\\s)unabled(\\s|$)/,””); document.getElementById(“j_confirm_btn”).className = newClassName; </script>
2、replace高階用法之 ---- $i
2.1、簡單的$i用法
<script> /*要求：將字串中的雙引號用"-"代替*/ var str = '"a", "b"'; console.log(str.replace(/"[^"]*"/g,"-$1-")); //輸出結果為：-$1-, -$1- /*解釋：$1就是前面正則(/"[^"]*"/g)所匹配到的每一個字元。*/ </script>
2.2、$i與分組結合使用
<script> /*要求：將下面字串替換成：javascript is fn.it is a good script language*/ var str = "javascript is a good script language"; console.log(str.replace(/(javascript)\s*(is)/g,"$1 $2 fn.it $2")); /*解釋：每一對括號都代表一個分組，從左往右分別代表第一個分組，第二個分組...；如上"*(javascript)"為第一個分組， "(is)"為第二個分組。$1就代表第一個分組匹配的內容，$2就代表第二個分組匹配的內容，依此類推...*/ </script>
2.3、$i與分組結合使用----關鍵字高亮顯示
當我們使用谷歌搜尋的時候我們會發現我們搜尋的關鍵字都被高亮顯示了，那麼這種效果用JavaScript能否顯示呢？答案是可以的，使用replace()很輕鬆就搞定了。
<script> /*要求：將下列字串中的"java"用紅色字型顯示*/ var str = "Netscape在最初將其指令碼語言命名為LiveScript，後來Netscape在與Sun合作之後將其改名為JavaScript。 JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規範也借自Java。 但JavaScript的主要設計原則源自Self和Scheme。"; document.write(str.replace(/(java)/gi,'<span style="color: red;font-weight: 800;">$1</span>')); /*解釋：必須要開啟全域性搜尋和忽略大小寫，否則匹配不到所有的”java”字元*/ </script>
2.4、反向分組----分組的反向引用
在正則中，當我們需要匹配兩個或多個連續的相同的字元的時候，就需要用到反向引用了，查詢連續重複的字元是反向引用最簡單卻也是最有用的應用之一。上面的”$i”也是反向分組的一種形式，這裡再介紹另一種反向分組。
<script type="text/javascript">
/* /ab(cd)\1e/ 這裡的 \1 表示把第1個分組的內容重複一遍*/
console.log(/ab(cd)\1e/.test("abcde"));//false
console.log(/ab(cd)\1e/.test("abcdcde"));//true
/*要求：將下列字串中相領重複的部分刪除掉"*/
var str = "abbcccdeee";
var newStr = str.replace(/(\w)\1+/g,"$1");
console.log(newStr); // abcde
</script>
3、replace高階用法之引數二為函式
replace函式的第二個引數不僅可以是一個字元，還可以是一個函式！
3.1、引數二為函式之引數詳解
<script>
var str = "bbabc";
var newStr = str.replace(/(a)(b)/g,function (){
console.log(arguments);//["ab", "a", "b", 2, "bbabc"]
/*引數依次為：
1、整個正則表示式所匹配到的字串----"ab"
2、第一個分組匹配到的字串，第二個分組所匹配到的字串....依次類推一直到最後一個分組----"a，b"
3、此次匹配在源字串中的下標，返回的是第一個匹配到的字元的下標----2
4、源字串----"bbabc"
*/
})
</script>
3.2、引數二為函式之首字母大寫案例
<script>
/*要求：將下列字串中的所有首字母大寫*/
var str = "Tomorrow may not be better, but better tomorrow will surely come!";
var newStr = str.replace(/\b\w+\b/gi,function (matchStr){
console.log(matchStr);//匹配到的字元
return matchStr.substr(0,1).toUpperCase() + matchStr.substr(1);
});
console.log(newStr);
</script>
3.3、引數二為函式之繫結資料----artTemplate模板核心
<h1>周星馳喜劇電影：</h1>
<div id="content"></div>
<script type="text/javascript">
var data = {
name: "功夫",
protagonist: "周星馳"
},
domStr = '<div><span>名稱：</span><span>{{name}}</span></div><div><span>導演：</span><span>{{protagonist}}</span> </div>';
document.getElementById("content").innerHTML = formatString(domStr,data);
/*繫結資料的核心就是使用正則進行匹配*/
function formatString(str,data){
return str.replace(/{{(\w+)}}/g,function (matchingStr,group1){
return data[group1];
});
}
</script>
4、replace高階用法之獲取與正則表示式匹配的文字
4.1、replace高階用法之獲取與正則表示式進行匹配的源字串
<script> var str = "i am a good man"; var newStr = str.replace(/good/g,"$&"); console.log(newStr);//結果：輸出i am a good man /*解釋：在這裡”$&”就是與正則表示式進行匹配的那個源字串*/ </script>
4.2、replace高階用法之獲取正則表示式匹配到的字元
<script> /*要求：將"i am a good man"替換成"i am a good-gond man" */ var str = "i am a good man"; var newStr = str.replace(/good/g,"$&-$&"); console.log(newStr); /*解釋：在這裡”$&”可以獲取到前面正則表示式匹配的內容，如上面的”$&”就是正則表示式匹配到的”good”*/ </script>
5、replace高階用法之獲取正則匹配的左邊的字元
<script> /*要求：將下列字串替換成"java-java is a good script"*/ var str = "javascript is a good script"; var newStr = str.replace(/script/,"-$`"); console.log(newStr) /*解釋："$`"獲取的是正則左邊的內容，如上正則中"script"字元前面的是"java"，"-$`"就是"-java"，"-$`"會把script替換掉。*/ </script>
6、replace高階用法之獲取正則匹配的右邊的字元
<script> /*要求：將下列字元替換成"java is a good language!it is a good script is a good script"*/ var str = "javascript is a good script"; var newStr = str.replace(/script/," is a good language!it$'"); console.log(newStr) /*解釋："$'"獲取的就是str右邊的內容，如上正則中"$'"就是" is a good script"。 " is a good language!it$'"會把正則匹配到的"script"替換掉*/ </script>