从一则案例解析js正则的String对象的replace方法使用技巧

栏目: JavaScript · 发布时间: 5年前

内容简介:这是我第一时间想到的方法,穷举这三个符号任意两个符号的排列组合,然后一一替换。根据排列组合公式可知一共有6种不同的组合方式,需要写6个正则。这种方法的好处是易于理解,但缺点也显而易见,代码臃肿,难以维护。首先,写出这个正则

这是我第一时间想到的方法,穷举这三个符号任意两个符号的排列组合,然后一一替换。根据排列组合公式可知一共有6种不同的组合方式,需要写6个正则。

这种方法的好处是易于理解,但缺点也显而易见,代码臃肿,难以维护。

思路2:写一个匹配出所有组合的正则,然后进行替换。

首先,写出这个正则

let reg = /((&&|\|\||-)\s*){2,}/g
复制代码

这个正则的意思是,匹配任意这三个符号(&& || -)加零个或多个空格出现两次以上的文本。

有了这个正则,接下来就是如何替换了,首先想到的是正则的反向引用了$1($1的意思是第一个分组的内容,正则中括号()代表分组,即 ((&&|\|\||-)\s*)

先来分析一下这个正则的匹配过程,我们写个测试案例来演示

'|| -'.replace(/((&&|\|\||-)\s*){2,}/g,"\$1")   // -
复制代码

匹配过程是这样的:

  • 从左到右遍历这个字符串,找到 "|| " 符合第一个分组内容,但不符合 {2,} (出现两次以上), 此时$1分组的内容是 "|| "
  • 继续遍历,匹配到 "-" 符合规则,此时$1分组的内容是 "-"
  • 这时已满足 (&&|\|\||-)\s*) 同时出现两次以上的规则,开始替换,将整个字符串替换成 $1 ,即 - ,所以输出为 "-"

那么问题来了,业务的需求是替换成第一个字符,而我们却替换成了最后一个字符。别着急,先喝口水冷静一下。其实我们只要把原字符串翻转一下,再传进来不就符合要求了吗,替换完毕后记得把字符串翻转回去就行了

// 翻转字符串
function rever(str) { 
  return str.split("").reverse().join("")
}
复制代码

完整代码如下:

let str = 'ccc && ||'
function rever(str) {
  return str.split("").reverse().join("")
}
let newStr = rever(rever(str).replace(/((&&|\|\||-)\s*){2,}/g,"\$1"))
console.log(newStr);
复制代码

代码写出来了,测试结果也符合预期,那么就大功告成了吗?

看看这段代码的实现原理,是把原字符串翻转,然后进行匹配替换,替换完在把字符串翻转回来。 代码执行过程中,是对原字符进行了修改的。如果放到生产环境中,由于用户的输入习惯不同,可能会造成某些不可预期的错误。

另辟蹊径:

replace的第二个参数,除了传入字符串,不是还可以传入一个函数吗?我们只要在这个函数中,把符合业务需要的第一个字符找出来,然后return 出去,不就完事了吗?

用这种方式处理,不会污染原字符串,没有副作用。不知道算不算得上最优解呢?

代码很简单,大家看一下应该就明白了:

let str = 'ccc && ||'
let newStr = str.replace(/((&&|\|\||-)\s+){2,}/g, function(a){
  return a.substr(0, a.indexOf(' ')) + ' ';
});
console.log(newStr);  // "ccc && "
复制代码

PS:点个赞再走吧~


以上所述就是小编给大家介绍的《从一则案例解析js正则的String对象的replace方法使用技巧》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

国际游戏设计全教程

国际游戏设计全教程

[美]迈克尔·萨蒙德 / 张然、赵嫣 / 中国青年出版社 / 2017-2 / 108.00元

你想成为一名电子游戏设计师吗?想知道《肯塔基0号路》《到家》《枪口》等独立游戏的制作理念及过程吗?想了解《戈莫布偶大冒险》《辐射3》《战争机器》中关卡设计的奥秘吗?本书用通俗易懂的文字介绍了在游戏开发与策划过程中,需要掌握的游戏设计原理和制作的基础知识,可以作为读者从“构思一个电子游戏”到“真正完成一个电子游戏”的完备指南。 本书以系统的游戏设计流程结合大量优秀的游戏设计案例进行讲解,让读者......一起来看看 《国际游戏设计全教程》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换