js怎么替换字符串？-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

在js中，可以使用str.replace()方法来替换字符串。replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串；然后返回一个新的字符串。

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法：

1	`stringObject.replace(regexp/substr,replacement)`

返回值

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

说明

字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。但是 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。因为没有在全局范围内查找
    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|$)表示匹配字符串结尾或字符串后面的空格*/
    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>