怎么替換js字符串

怎么替換js字符串？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

在js中，可以使用str.replace()方法來替換字符串。replace()方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串；然后返回一個新的字符串。

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

語法：

stringObject.replace(regexp/substr,replacement)

返回值

一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

說明

字符串 stringObject 的 replace() 方法執(zhí)行的是查找并替換的操作。它將在 stringObject 中查找與 regexp 相匹配的子字符串，然后用 replacement 來替換這些子串。如果 regexp 具有全局標志 g，那么 replace() 方法將替換所有匹配的子串。否則，它只替換第一個匹配子串。

replacement 可以是字符串，也可以是函數(shù)。如果它是字符串，那么每個匹配都將由字符串替換。但是 replacement 中的 $ 字符具有特定的含義。如下表所示，它說明從模式匹配得到的字符串將用于替換。

示例：使用 "hello" 替換字符串中的 "hi"：

<script type="text/javascript">

var str="hi!";
console.log(str.replace(/hi/, "hello"));

</script>

輸出：

hello!

擴展知識replace的用法

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。因為沒有在全局范圍內(nèi)查找
    console.log(str.replace(/a/,"A"));
    //所有a都被替換成了A
    console.log(str.replace(/a/g,"A"));
</script>

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|$)表示匹配字符串結(jié)尾或字符串后面的空格*/
    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-"));
    //輸出結(jié)果為：-$1-, -$1-
    /*解釋：$1就是前面正則(/"[^"]*"/g)所匹配到的每一個字符。*/
</script>

2.2、$i與分組結(jié)合使用

<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就代表第一個分組匹配的內(nèi)容，$2就代表第二個分組匹配的內(nèi)容，依此類推...*/
</script>

2.3、$i與分組結(jié)合使用----關(guān)鍵字高亮顯示

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

<script>
    /*要求：將下列字符串中的"java"用紅色字體顯示*/
    
    var str = "Netscape在最初將其腳本語言命名為LiveScript，后來Netscape在與Sun合作之后將其改名為JavaScript。
JavaScript最初受Java啟發(fā)而開始設(shè)計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。
但JavaScript的主要設(shè)計原則源自Self和Scheme。";
    document.write(str.replace(/(java)/gi,'<span style="color: red;font-weight: 800;">$1</span>'));
    /*解釋：必須要開啟全局搜索和忽略大小寫，否則匹配不到所有的”java”字符*/
</script>

2.4、反向分組----分組的反向引用

在正則中，當我們需要匹配兩個或多個連續(xù)的相同的字符的時候，就需要用到反向引用了，查找連續(xù)重復的字符是反向引用最簡單卻也是最有用的應用之一。上面的”$i”也是反向分組的一種形式，這里再介紹另一種反向分組。

<script type="text/javascript">
    /* /ab(cd)\1e/ 這里的 \1 表示把第1個分組的內(nèi)容重復一遍*/
    console.log(/ab(cd)\1e/.test("abcde"));//false
    console.log(/ab(cd)\1e/.test("abcdcde"));//true
    /*要求：將下列字符串中相領(lǐng)重復的部分刪除掉"*/
    var str = "abbcccdeee";
    var newStr = str.replace(/(\w)\1+/g,"$1");
    console.log(newStr); // abcde
</script>

3、replace高級用法之參數(shù)二為函數(shù)

replace函數(shù)的第二個參數(shù)不僅可以是一個字符，還可以是一個函數(shù)！

3.1、參數(shù)二為函數(shù)之參數(shù)詳解

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

3.2、參數(shù)二為函數(shù)之首字母大寫案例

<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、參數(shù)二為函數(shù)之綁定數(shù)據(jù)----artTemplate模板核心

<h2>周星馳喜劇電影：</h2>
<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);
    /*綁定數(shù)據(jù)的核心就是使用正則進行匹配*/
    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);//結(jié)果：輸出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);
    /*解釋：在這里”$&”可以獲取到前面正則表達式匹配的內(nèi)容，如上面的”$&”就是正則表達式匹配到的”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)
    /*解釋："$`"獲取的是正則左邊的內(nèi)容，如上正則中"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右邊的內(nèi)容，如上正則中"$'"就是" is a good script"。
    " is a good language!it$'"會把正則匹配到的"script"替換掉*/
</script>

關(guān)于怎么替換js字符串問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。