javascript replace高級用法

在前端與後臺交互的時候咱們一般都須要將後臺傳遞的數據綁定到html中，這個綁定數據的方式咱們一般是使用jQuery或者使用原生的innerHTML進行綁定，固然也可使用artTemplate模板來綁定數據，那麼artTemplate模板它綁定數據的原理是什麼呢？其實它就是利用了replace()方法。

對於正則replace約定了一個特殊標記符」$」：

1）、$i(i取值範圍1~99)：表示從左到右正則子表達式所匹配的文本
2）、$&：表示與正則表達式匹配的所有文本
3）、$`(`：1旁邊的那個鍵)：表示匹配字符串的左邊文本
4）、$'('：單引號)：表示匹配字符串的右邊文本
5）、$$：表示$轉移

一、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.一、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>

二、replace高級用法之 ---- $i

2.一、簡單的$i用法

<script>
    /*要求：將字符串中的雙引號用"-"代替*/

    var str = '"a", "b"';
    console.log(str.replace(/"[^"]*"/g,"-$1-"));
    //輸出結果爲：-$1-, -$1-
    /*解釋：$1就是前面正則(/"[^"]*"/g)所匹配到的每個字符。*/
</script>

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.三、$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.四、反向分組----分組的反向引用

在正則中，當咱們須要匹配兩個或多個連續的相同的字符的時候，就須要用到反向引用了，查找連續重複的字符是反向引用最簡單卻也是最有用的應用之一。上面的」$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>

三、replace高級用法之參數二爲函數

replace函數的第二個參數不只能夠是一個字符，還能夠是一個函數！

3.一、參數二爲函數之參數詳解

<script>
    var str = "bbabc";
    var newStr = str.replace(/(a)(b)/g,function (){
    console.log(arguments);//["ab", "a", "b", 2, "bbabc"]
     /*參數依次爲：
        一、整個正則表達式所匹配到的字符串----"ab"
        二、第一個分組匹配到的字符串，第二個分組所匹配到的字符串....依次類推一直            到最後一個分組----"a，b"
        三、這次匹配在源字符串中的下標，返回的是第一個匹配到的字符的下標----2
        四、源字符串----"bbabc"
      */
    })
</script>

3.二、參數二爲函數之首字母大寫案例

<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.三、參數二爲函數之綁定數據----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>

四、replace高級用法之獲取與正則表達式匹配的文本

4.一、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.二、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>

五、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>

六、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>