replace高级

replace高级

一、replace的基础用法

var str = "hello world";
//用replace方法把"l"字母替换成大写的"L"

console.log(str.replace('l','L'));
//运行结果是"heLlo world"，只替换了第一个匹配的字符'l'，
//如果想要替换多个字符，就要结合正则表达式。

console.log(str.replace(/l/g,'L'));
//传入的RegExp对象指定其global属性，匹配所有'l'字符替换成'L'。

二、repalce的高级用法 (特殊标记符$)

replace约定了一个特殊的标记符”$”
1.$1~$99：与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
2. $&：与 regexp 相匹配的子串。
3. $`（波浪键）：位于匹配子串左侧的文本。
4. $'（单引号）：位于匹配子串右侧的文本。
5. $$：直接量符号。

三、”$”在replace中的应用

//匹配后替换
var str = "hello world->helloworld";
str = str.replace(/\s(world)*(->)/,"$1 $2 change $2 ");
console.log(str);

//匹配后颠倒
var str = "hello world->helloworld";
str = str.replace(/(\w+\s\w+)*->*(\w+)/,"$2 -> $1");
console.log(str);

//$&:表示与正则表达式匹配的全文本。
var str = "hello world"
str = str.replace(/(\w+)/,"$&->$&->$&->$&");
console.log(str);

//$`（波浪键）：位于匹配子串左侧的文本。
var str = "javascript"
str = str.replace(/(script)/,"$& != $`");
console.log(str);

//$'（单引号）：位于匹配子串右侧的文本。
var str = "helloworld"
str = str.replace(/(hello)/,"$&->&'");
console.log(str);

四、关键字变色

var str = "我把车子开上五环<br>快点把车子开上五环<br>什么都不管<br>我就是要上五环<br>啊 五环 你比四环多一环";
str = str.replace(/(五环)/g,"<font color=red>$1</font>");
document.write(str);

五、replace()的第二个参数可以是函数

replace(/…/,function(‘正则表达式所有匹配的字符’，’第一分组匹配的内容、第二分组匹配的内容….直到最后一个分组’，’匹配在字符串中下标’，’源自的字符串’){})

var str = "helloworld";
str.replace(/(lo)(w)/g,function(){
    console.log(arguments);
})

//输出结果为["low", "lo", "w", 3, "helloworld"]
// 正则表达式所有匹配的字符: "low"；
//第一分组匹配的内容、第二分组匹配的内容....直到最后一个分组: "lo"、"w"；
//匹配在字符串中下标: 3；
//源自的字符串: "helloworld"。

用replace封装一个数据绑定函数

function format(str,data){
    return str.replace(/@\((\w+)\)/g,function(match,key){
        return typeof data[key] === "undefined"? '' : data[key]
    });
}
var word = {
    hello:"Hello",
    world:"World"
}
var str = format("你好（@(hello)）！,世界（@(world)）!",word);
console.log(str);

//输出结果：你好（Hello）！,世界（World）!
//过程：   1.正则表达式（/@\((\w+)\)/g）找到 “@(hello)”；
        2.function(match,key)，match："@(hello)",key:"hello";
        3.word[hello]替换 "@(hello)"。