专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

js怎么替换字符串,js替换字符串的4种方法

来源:小易整编  作者:小易  发布时间:2022-12-30 02:33
摘要:js怎么替换字符串,js替换字符串的4种方法在JavaScript代码中出现这个字符串:Testabctesttestabctesttesttestabctesttestabc比如直接使用replace替换的方法,如下:str=str....

js怎么替换字符串,js替换字符串的4种方法

在JavaScript代码中出现这个字符串:

"Test abc test test abc test test test abc test test abc"

比如直接使用replace替换的方法,如下:

str = str.replace('abc', '');

似乎只删除了abc上面字符串中第一次出现的。我怎样才能替换它的所有出现?下面介绍4种替换所有出现字符串的方法。

js怎么替换字符串,js替换字符串的4种方法

方式一、使用replace加正则

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

  1. 在正则表达式文字中,将g附加到标志部分:/abc/g。

  2. 对于正则表达式构造函数,使用 flags 参数:new RegExp(' abc  ', 'g')

代码如下:

str = str.replace(/abc/g, '');

或者:

var find = 'abc';var re = new RegExp(find, 'g');str = str.replace(re, '');

可以通过封装方法,进一步简化它。

function replaceAll(str, find, replace) {  return str.replace(new RegExp(find, 'g'), replace);}

注意:正则表达式包含特殊(元)字符,因此在find上面的函数中盲目传递参数而不对其进行预处理以转义这些字符是危险的。

因此,为了使上述replaceAll()功能更安全,如果您还包含以下内容,则可以将其修改为以下内容escapeRegExp:

function escapeRegExp(string) {  return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string}

function replaceAll(str, find, replace) {  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);}

方式二、replaceAll() 方法

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

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

let result = "1 abc 2 abc 3".replaceAll("abc", "xyz");// `result` is "1 xyz 2 xyz 3"

但是首先检查我可以使用或其他兼容性表,以确保您的目标浏览器首先添加了对它的支持。

replaceAll的兼容实现:

String.prototype.replaceAll = String.prototype.replaceAll || function(string, replaced) {  return this.replace(new RegExp(string, 'g'), replaced);};

方式三、使用 split 和 join 的方法

不使用任何正则表达式的最简单方法是 split 和 join,这种方法主要包含二个阶段:

  1. 使用 split 方法,根据指定的字符将字符串分成多个部分。

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

作为简单文字字符串的正则表达式的替代方案,您可以使用:

str = "Test abc test test abc test...".split("abc").join("");

一般模式是

str.split(search).join(replacement)

方法四、利用循环

基于while循环的解决方案很慢,通常对小字符串慢约4倍,对长字符串慢约 3000 倍。如下:

while(str.includes("abc")){    str = str.replace("abc", "replaced text");}


本文地址:百科问答频道 https://www.neebe.cn/wenda/886508.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • JS 字符串转数组

    JS 字符串转数组

    JS中,将一个字符串转置为数组,使用到的方法是split(),通过使用split()方法,可以轻松的将一个字符串转换为数组操作方法01新建一个HTML文档,用于承载JS02...

  • doT.js是什么

    doT.js是什么

    doT.js是一个JavaScript模板框架,在web前端使用dot.js作为模板引擎,主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码。doT.js是一个JavaScript模板框架,在web前端使用do...

  • JsRender是什么

    JsRender是什么

    JsRender是jQuery模板,专为高性能的纯字符串渲染而优化,无需DOM和其他jQuery依赖。允许定义一次样板结构并重复使用它来动态生成HTML。JsRender是jQuery模板,专为高性能的纯字符串渲染而优...

  • js代码大全,常用js代码代码示例

    js代码大全,常用js代码代码示例

    js代码大全,常用js代码代码示例做为开发过React/ReactNative的工程师,在刚开始接触Flutter开发的时候,一定会遇到这种情况,对于某个功能你能很熟练使用特定Javascript语法去完成,但是对于Flutter开发,对应...

  • jstl是什么,JSP标准标签库jstl

    jstl是什么,JSP标准标签库jstl

    jstl是什么,JSP标准标签库jstlJSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能。JSTL支持通用的、结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签。除了这些,它还提供了一...

  • js教程,JavaScript学习入门教程

    js教程,JavaScript学习入门教程

    js教程,JavaScript学习入门教程JavaScript(通常缩写为JS)是一种解释型、面向对象、多范式的高级编程语言。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)...

  • jscript和javascript的区别

    jscript和javascript的区别

    JavaScript与JScript的区别JScript是Microsoft公司开发的,Javascript是Netscape公司开发的,虽然他们是死对头,但是在现在的浏览器中,无论你把语言指定为Javascript还是Jscript,浏览...

  • jsp内置对象有哪些,jsp的内置对象与应用

    jsp内置对象有哪些,jsp的内置对象与应用

    jsp内置对象有哪些,jsp的内置对象与应用虽然Jsp已经是中古时期的技术了,但是对于很多新入门的程序员来说,学会Jsp不仅是了解JavaEE设计原理的重要环节,也是了解现在盛行的前后端分离技术的源流的基础。而且,很多程序员可能会接触到的一...

  • 周排行
  • 月排行
  • 年排行

精彩推荐