您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

在 JavaScript 中替换所有指定字符 3 种方法

时间:2020-06-24 13:14:36  来源:  作者:

在 JS 没有提供一种简便的方法来替换所有指定字符。 在 JAVA 中有一个 replaceAll() ,replaceAll(String regex, String replacement))方法使用给定的参数 replacement 替换字符串所有匹配给定的正则表达式的子字符串。

在 JS 最新的提案
String.prototype.replaceAll() 中,它将replaceAll()方法用于字符串。

在该提案还没出来之前,我们来看看在 JS 中有哪些方法可以实现 reaplceAll 的效果。

第一种:使用 split 和 join 的方法

这种方法,主要包含二个阶段:

  1. 使用 split 方法,根据指定的字符将字符串分成多个部分。
  2. 然后使用 join 方法将分割的多个部分连接在一直,并在它们之间插入指定的字符。

例如,我们将字符串'1+2+3'中的+替换为-。首先,通过split方法根据 +分割符将'1+2+3'分开,得到['1','2','3']。然后通过 join 方法并指定连接字条-,得到结果'1-2-3'。示例如下:

const search = 'duck';
const replaceWith = 'goose';

const result = 'duck duck go'.split(search).join(replaceWith);

result; // => 'goose goose go'

'duck duck go'.split('duck')将字符串分割成几段:['', ' ', ' go']。['', ' ', ' go'].join('goose') 在元素之间插入'goose'并连接起来,得到'goose goose go'。

最后我们把这种方式封装成一个帮助函数 replaceAll:

function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}

replaceAll('abba', 'a', 'i');          // => 'ibbi'
replaceAll('go go go!', 'go', 'move'); // => 'move move move!'
replaceAll('oops', 'z', 'y');          // => 'oops'

这种方法需要将字符串转换为数组,然后再转换回字符串。这是一种变通方法,但不是一个好的解决方案。

2. 使用全局正则表达式replace()

String.prototype。replace(regExp, replaceWith)搜索正则表达式regExp出现的情况,然后使用replaceWith字符串替换所有匹配项。

必须启用正则表达式上的全局标志,才能使replace()方法替换模式出现的所有内容,我们可以这样做:

  1. 在正则表达式文字中,将g附加到标志部分:/search/g。
  2. 对于正则表达式构造函数,使用 flags 参数:new RegExp('search', 'g')

我们把所有的duck换成goose:

const searchRegExp = /duck/g
const replaceWith = 'goose'

const result = 'duck duck go'.replace(searchRegExp, replaceWith)

result // 'goose goose go'

正则表达式文字/duck/g与'duck'字符串匹配,并且启用了全局模式。

'duck duck go'.replace(/duck/g, 'goose')用'goose'替换所有匹配/duck/g字符串。

通过向正则表达式添加i标志,可以忽略大小写:

const searchRegExp = /duck/gi;
const replaceWith = 'goose';

const result = 'DUCK duck go'.replace(searchRegExp, replaceWith);

result; // => 'goose goose go'

再次查看正则表达式:/duck/gi。 正则表达式启用了不区分大小写的搜索:i和全局标志g。 /duck/gi匹配'duck',以及'DUCK','Duck'等。

'DUCK duck go'.replace(/duck/gi, 'goose')以不区分大小写的方式用'goose'替换了/duck/gi`所匹配到的结果。

虽然正则表达式替换了所有出现的字符串,但在我看来,这种方法过于繁琐。

2.1 字符串中的正则表达式

当在运行时确定搜索字符串时,使用正则表达式方法不方便。 从字符串创建正则表达式时,必须转义字符-[] / {}()* +? 。 ^ $ |,示例如下:

const search = '+'

const searchRegExp = new RegExp(search, 'g') // // 抛出 SyntaxError 异常
const replaceWith = '-'

const result = '5+2+1',replace(searchRegExp, replaceWith )

上面的代码片段尝试将搜索字符串'+'转换为正则表达式。 但是'+'是无效的正则表达式,因此会引发SyntaxError: Invalid regular expression: /+/异常。

2.2 字符串的 replace() 方法

如果replace(search, replaceWith)的第一个参数是字符串,那么该方法只替换search的第一个结果。

const search = 'duck';
const replaceWith = 'goose';

const result = 'duck duck go'.replace(search, replaceWith);

result; // => 'goose duck go'

'duck duck go'.replace('duck','goose')仅将'duck'的首次出现替换为'goose'。

3.replaceAll() 方法

最后,新的提案
String.prototype.replaceAll()(在第3阶段)将replaceAll()方法引入到 JavaScript 的字符串中。

replaceAll(search, replaceWith)字符串方法用replaceWith替换所有的search字符串,没有任何变通方法。

我们把所有的duck换成goose:

const search = 'duck'
const replaceWith = 'goose';

const result = 'duck duck go'.replaceAll(search, replaceWith);

result; // => 'goose goose go'

'duck duck go'.replaceAll('duck', 'goose')将所有出现的'duck'字符串替换为'goose',这是简单明了的解决方案。

3.1 replaceAll()与replace()的区别

字符串方法replaceAll(search, replaceWith)和replace(search, replaceWith)的行为方式是一样的,除了两件事:

  1. 如果search参数是一个字符串,那么replaceAll()用replaceWith替换所有出现的search,而replace()只替换第一次出现的search。

2.如果search参数是一个非全局正则表达式,那么replaceAll()将抛出一个TypeError 异常。

4. 总结

替换所有出现的字符串应该很容易。 但是,JavaScript 很久一段时间没有提供这种方法。

一种方法是通过搜索字符串将字符串拆分为多个块,将字符串重新连接,然后在块之间放置替换字符串:string.split(search).join(replaceWith)。 这种方法有效,但是很麻烦。

另一种方法是将String.prototype.replace()与启用了全局搜索的正则表达式一起使用:string.replace(/SEARCH/g, replaceWith)。

不幸的是,由于必须转义正则表达式的特殊字符,因此在运行时无法轻松地从字符串生成正则表达式。 处理正则表达式以简单地替换字符串的方法非常麻烦。

最后,
String.prototype.replaceAll()方法可以轻松地直接替换所有出现的字符串:string.replaceAll(search, replaceWith)。 这是第3阶段的提案,但希望很快就会纳入新的JavaScript标准。

我的建议是使用replaceAll()来替换字符串。但你需要一个polyfill来使用这个方法。

你还知道其他替换所有字符串出现的方法吗?欢迎留言讨论。

作者: Dmitri Pavlutin 译者:前端小智 来源:dmitripavlutin

原文:
https://dmitripavlutin.com/replace-all-string-occurrences-javascript/



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
为什么要使用 debugger这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试?我们首先需要认可使用断点的是必要...【详细内容】
2021-08-26  Tags: JavaScript  点击:(66)  评论:(0)  加入收藏
JavaScript 可以做很多好玩的事, 从复杂的框架到处理API,有太多的东西需要学习。但是,它也能让我们只用一行就能做一些了不起的事情。1. 获得一个随机的布尔值(true/false)该函数...【详细内容】
2021-08-19  Tags: JavaScript  点击:(77)  评论:(0)  加入收藏
JavaScript 提供了大量不同的处理数组的方法,这里花几分钟时间介绍 8 个项目中可以用到的数组方法。1. Array.map()使用.map() 方法,可以创建一个基于原始数组的修订版数组。....【详细内容】
2021-08-19  Tags: JavaScript  点击:(95)  评论:(0)  加入收藏
随着现代 Web 开发,我们要么使用 require 要么使用 import 引用 JavaScript 依赖项。有时,我们将两者结合使用。但是,你知道为什么这两者都存在吗? 使用一种或另一种时的最佳实...【详细内容】
2021-08-16  Tags: JavaScript  点击:(89)  评论:(0)  加入收藏
步骤1.创建一个新的对象obj2.将对象与构建函数通过原型链连接起来3.将构建函数中的this绑定到新建的对象obj上4.根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回...【详细内容】
2021-07-29  Tags: JavaScript  点击:(103)  评论:(0)  加入收藏
在执行JavaScript代码之前,js引擎首先会对其进行解析和编译。在编译阶段,变量和函数声明被放入内存,这被称为提升(hoisting)。...【详细内容】
2021-06-23  Tags: JavaScript  点击:(131)  评论:(0)  加入收藏
在日常工作中,文件上传是一个很常见的功能。在某些情况下,我们希望能限制文件上传的类型,比如限制只能上传 PNG 格式的图片。针对这个问题,我们会想到通过 input 元素的 accept...【详细内容】
2021-06-10  Tags: JavaScript  点击:(180)  评论:(0)  加入收藏
JavaScript 判断数组的几种方法及其利弊。1. typeof对于 Function、String、Number、Undefined 等几种类型的对象来说,他完全可以胜任。但是为 Array 时:var arr = [1, 2, 3]c...【详细内容】
2021-03-22  Tags: JavaScript  点击:(329)  评论:(0)  加入收藏
本文最初发表于 v8.dev(Faster JavaScript calls),基于 CC 3.0 协议分享,由 InfoQ 翻译并发布。JavaScript 允许使用与预期形式参数数量不同的实际参数来调用一个函数,也就是传递...【详细内容】
2021-02-23  Tags: JavaScript  点击:(199)  评论:(0)  加入收藏
千呼万唤的全球2020的JS报告终于出来了。 我们来看看这一个糟糕却又不平凡的一年,JS发生了什么样的变化。 尽管2020年很糟糕,但 JavaScript 作为一个整体仍然设法向前发展。随...【详细内容】
2021-01-14  Tags: JavaScript  点击:(248)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条