JS基础篇--replace替换全部的正确应用

一般使用

var str = "test-test-test";
str = "test-test-test".replace("test", "ok");
console.log(str);

使用正则：

var str = "test-test-test";
str = "test-test-test".replace(/test/g, "ok");
console.log(str);

循环替换

如下这种情况，表情标签的替换，我们需要正常的字符串替换，结合例如 

while + indexOf

 实现。

var faces = {
"/::)": "weixiao",
"/::~": "pizui",
"/::B": "se",
"/::|": "fadai",
"/:8-)": "deyi",
"/::<":"liulei",
"/::$": "haixiu",
"/::'(": "daku",
"/::-|": "gangga"
};

var str = "/::)-/::B-/::)-/:8-)-/:8-)";

for (var k in faces) {
while(str.indexOf(k) > -1) {
str = str.replace(k, faces[k]);
}
}

console.log(str);

这样，基本功能实现，不过这是有问题的，如果有一个键值相同的，就会死循环例如：

var faces = {
"/::)": "weixiao",
"/:hehe": "/:hehe"
};

var str = "/::)-/::B-/:hehe-/:8-)-/:8-)";

for (var k in faces) {
while(str.indexOf(k) > -1) {
str = str.replace(k, faces[k]);
}
}

console.log(str);

修改为如下代码解决死循环问题：

var faces = {
"/::)": "weixiao",
"/:hehe": "/:hehe"
};

var str = "/::)-/::B-/:hehe-/:8-)-/:8-)";

for (var k in faces) {
var p = -1; // 字符出现位置
var s = 0; // 下一次起始位置
while((p = str.indexOf(k, s)) > -1) {
s = p + faces[k].length; // 位置 + 值的长度
str = str.replace(k, faces[k]);
}
}

console.log(str);

再进行简单封装一下：

/**
* 字符串替换
* @param  {string} str    要被替换的字符串
* @param  {string} substr 要替换的字符串
* @param  {string} newstr 用于替换的字符串
* @return {string}        替换后的新字符串
*/
function replace(str, substr, newstr) {
var p = -1; // 字符出现位置
var s = 0; // 下一次起始位置

while((p = str.indexOf(substr, s)) > -1) {
s = p + newstr.length; // 位置 + 值的长度
str = str.replace(substr, newstr);
}

return str;
}

console.log( replace("ssssss", "ss", "s") ); // sss

使用正则表达式封装

/**
* 字符串替换
* @param  {string} str    要被替换的字符串
* @param  {string} substr 要替换的字符串
* @param  {string} newstr 用于替换的字符串
* @return {string}        替换后的新字符串
*/
function replace(str, substr, newstr) {
substr = substr.replace(/[.\\[\]{}()|^$?*+]/g, "\\$&"); // 转义字符串中的元字符
var re = new RegExp(substr, "g"); // 生成正则
return str.replace(re, newstr);
}

console.log( replace("ssssss", "ss", "s") ); // sss

文章来源：北大青鸟学校前端开发小组