在前端與后臺交互的時候我們通常都需要將后臺傳遞的數據綁定到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與分組結合使用----關鍵字高亮顯示

當我們使用谷歌搜索的時候我們會發(fā)現我們搜索的關鍵字都被高亮顯示了，那么這種效果用JavaScript能否顯示呢？答案是可以的，使用replace()很輕松就搞定了。