在前端与背景交互的时刻我们一般都须要将背景通报的数据绑定到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>