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

使用RegExp封装

/**
 * 字符串替换
 * @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

参考地址:http://www.52cik.com/2015/11/...

阅读 4.5k

风雨过后见彩虹
对web前端的爱好与兴趣而来,收集、发表有意义的文章随笔问题,让知识沉淀积累,方便自己查阅,方便网友...

本博客主要是记录自己的学习点滴~,文章来源于总结,转载,网络学习资源,还有在工作中实际碰到的问题以记录,时间原因博文部分为用心打磨,部分仅为临时记录,还有一些不正确老博文随着后续的认识会不断的更正。

8.7k 声望
806 粉丝
0 条评论

本博客主要是记录自己的学习点滴~,文章来源于总结,转载,网络学习资源,还有在工作中实际碰到的问题以记录,时间原因博文部分为用心打磨,部分仅为临时记录,还有一些不正确老博文随着后续的认识会不断的更正。

8.7k 声望
806 粉丝
宣传栏