JavaScript replace用法全解

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。当replace应用在正则表达式上，它的价值是非常之高的！

stringObject.replace(regexp/substr,replacement)

参数	描述
regexp/substr	必需。规定子字符串或要替换的模式的 RegExp 对象。 请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
replacement	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

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

如果是字符串，只替换第一次出现位置处的值！若想替换全部 ，用正则对象

<span style="font-size:14px;">myString = "javascript is a good script language";
console.log(myString.replace("a","A")); //jAvascript is a good script language
console.log(myString.replace(/a/g,"A")); //jAvAscript is A good script lAnguAge</span>

高级用法1：特殊标记$

字符	替换文本
$1、$2、...、$99	与 regexp 中的第 1 到第 99 个子表达式相匹配的文本组。
$&	与 regexp 相匹配的子串。
$`	位于匹配子串左侧的文本。
$'	位于匹配子串右侧的文本。
$$	直接量符号。

var  myString = '"a", "b"';
myString = myString.replace(/"([^"]*)"/g, "'$1'");// 'a' 'b'
console.log(myString)

myString = "geek , web";
myString = myString.replace(/(\w+)\s*, \s*(\w+)/, "$2 我爱你 $1"); // web 我爱你　geek
console.log(myString)

myString = "boy & girl";
myString = myString.replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1") //girl & boy
console.log(myString)

myString = "boy";
myString = myString.replace(/\w+/g,"$&-$&") // boy-boy
console.log(myString)

myString = "javascript";
myString = myString.replace(/script/,"$& != $`") //javascript != java
console.log(myString)

myString = "javascript";
myString = myString.replace(/java/,"$&$' is $'") // javascript is script
console.log(myString)

高级用法2：函数

函数的参数依次是：

1、整个正则表达式匹配的字符。
2、第一分组匹配的内容、第二分组匹配的内容…… 以此类推直到最后一个分组。
3、此次匹配在源自符串中的下标（位置）。
4、源自符串

实现首字母大写

myString = 'aaa bbb ccc';
myString=myString.replace(/\b\w+\b/g, function(word){
            return word.substring(0,1).toUpperCase()+word.substring(1);}
);
console.log(myString)

封装一个函数，用于简单的数据绑定，以替代字符串拼接

function formatString(str,data){
    return str.replace(/@\((\w*)\)/g,function(match,key){
        return typeof data[key] === 'undefind'? '':data[key];
    });
}function formatString(str,data){
    return str.replace(/@\((\w*)\)/g,function(match,key){
        return typeof data[key] === 'undefind'? '':data[key];
    });
}

用法对比

function fnOld(){
    var user={name:'geekWeb'}
    var span = document.getElementById("span");
    span.innerHTML = "欢迎"+user.name+'来到百度世界';
};
function fn(){
    var user={name:'geekWeb'}
    var span = document.getElementById("span");
    span.innerHTML = formatString("欢迎@(name)来到百度世界",user)
};