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

jackzou 发布于2019-08-22 15:15 / 1513人阅读

摘要：一般使用使用正则循环替换如下这种情况，表情标签的替换，我们需要正常的字符串替换，例如结合实现。

一般使用

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/...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93313.html

JavaScript中8个常见的陷阱

摘要：然而，不会在年的基础上加，而只是表示年。闭包这是一个经典的面试题虽然期望输出，然而实际上却不会。因为第行的没有在正确的环境下执行。译者按: 漫漫编程路，总有一些坑让你泪流满面。原文: Who said javascript was easy ? 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。这里我们针对JavaScri...

doodlewind 2019-08-21 11:46 评论0 收藏0
[ JS 进阶 ] test, exec, match, replace

摘要：用法介绍注为的实例为的实例用法说明返回值判断是否包含匹配结果包含返回，不包含返回。当为全局的对象的时候，替换每一项匹配项。如下表所示，它说明从模式匹配得到的字符串将用于替换。字符替换文本与中的第到第个子表达式相匹配的文本。上面这四个方法在js中用的很多，但有时对它们又不清晰，所以有必要来总结一下。对了，这篇文章可能会涉及到正则表达式相关知识，所以推荐没有正则基础的去看看这篇入门文章...

why_rookie 2019-08-21 10:38 评论0 收藏0
正则表达式-理论基础篇

摘要：正则表达式理论基础篇搬运自个人博客原址正则表达式理论基础篇什么是正则表达式可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。正则表达式-理论基础篇搬运自个人博客,原址正则表达式-理论基础篇什么是正则表达式?可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。强大的字符串匹配工具如何建立一个正则表达式...

wanglu1209 2019-08-21 10:46 评论0 收藏0
正则表达式-理论基础篇

摘要：正则表达式理论基础篇搬运自个人博客原址正则表达式理论基础篇什么是正则表达式可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。正则表达式-理论基础篇搬运自个人博客,原址正则表达式-理论基础篇什么是正则表达式?可以称作规则一个描述字符模式的对象，正则表达式中的字母和数字，都是按照字面含义进行匹配的。强大的字符串匹配工具如何建立一个正则表达式...

vpants 2019-08-01 14:52 评论0 收藏0