【JavaScript】详解JavaScript中的replace()函数

2023-10-28


1. 方法简介

该方法的签名是:replace([RegExp|String],[String|Function])

该方法 返回一个新的字符串,但并不改变字符串本身。

该方法接收2个参数,
第一个参数可以是字符串,也可以是一个正则表达式;
第二个参数可以是一个字符串,也可以是一个函数。

2. replace()使用

2.1 replace(字符串,字符串)

假如我们有一个字符串中出现了错别字”背景“,需要用”北京“来替换,那么我们可以如下搞定:

let str = '我爱背景天安门';
str = str.replace('背景','北京');
console.log(str);   // 输出结果:我爱北京天安门

但这个用法有一个问题:

let str = '我爱背景天安门,但是背景雾霾太严重';
str = str.replace('背景','北京');
// 输出结果:我爱北京天安门,但是背景雾霾太严重
console.log(str);

我们发现,如果字符串str中有多个待替换的子串,比如本例中的“背景”,出现了2次,那么replace()方法只能给我们用目标字符串(北京)替换掉第1次出现的"背景"。

如果想把所有的"背景"都给替换了,就必须调用多次。

此使用方法bug: 只能替换一次 多次替换需要多次调用


2.2 replace(正则表达式,字符串)

let str = '我爱背景天安门,但是背景雾霾太严重';
str = str.replace(/背景/g,'北京');
// 输出结果:我爱北京天安门,但是北京雾霾太严重
console.log(str); 

这里需要说明的是,str.replace(/背景/g,“北京”)的第一个参数 ”/背景/g“ 是一个正则表达式,使用/ /的正则写法是JavaScript中正则表达式的字面量写法。
在此处,正则表达式的末尾有个g,它表示match源字符串str中所有匹配项。
这里如果没有g,那么也只能匹配到第一个错别字”背景“,只有加了这个g,才能匹配到所有的”背景“。


2.3 replace(正则表达式,function(){})

以上的用法还是比较直观的,但是能实现的功能也比较简单,如果需要做一些复杂的字符串替换运算,那么就需要使用较为高级(复杂)的用法,就是 正则+function 的用法。说白了就是第一参数传一个正则表达式,我们下面称之为RegArg;第二个参数给一个函数,我们下面称之为FuncArg。这也是replace()的核心用法。

本质对str使用RegArg做match()匹配,如果匹配到多项结果(比如使用了全局匹配g,或者分组),那么每一个匹配结果都将执行一次FuncArg函数,并且用该函数的返回值替代源字符串中的匹配项。


2.3.1 简单用法,正则表达式不使用分组

let str = '我爱背景天安门,但是背景雾霾太严重';
str = str.replace(/背景/,function(){
    console.log(arguments);
    return '北京'
});

console.log(str);

在这里插入图片描述
解析:

  • 本例的目的是:把原字符串中的’背景’,替换为’北京’。
  • 正则表达式没有使用全局匹配符g,所以只替换了源字符串中第一个‘背景’子串,FuncArg只执行了一次。

replace()函数第一个参数是简单正则表达式,第二个参数是函数时:
这个函数是有参数的,而且这些参数是默认的。

  • arguments[0]是匹配到的子字符串
  • arguments[1]是匹配到的子串的索引位置
  • arguments[2]是源字符串本身

.本例如果想替换所有的‘背景’为‘北京’,只需要让正则表达式后加个g。

let str = '我爱背景天安门,但是背景雾霾太严重';
str = str.replace(/背景/g,function(){
    console.log(arguments);
    return '北京'
});

console.log(str);

在这里插入图片描述

我们可以看到,输出了2个Arguments,因为我们使用全局匹配g后,会match到2个项,所以就执行了2次function。
第一个跟前边一样,第二个arugments的索引位置是10,因为源字符串中第二个‘背景’的索引是10.


eg:把捐款是100元以下的金额数用‘**’来替换掉。

var txt ='刘菲:50元。张常成:150元。孙玉杰:200元。李明轩:20元。李子豪:1500元。';
txt = txt.replace(/\d+/g,function(){
    console.log(arguments);
    return arguments[0].length > 2 ? arguments[0] : '**';
});

console.log(txt);

在这里插入图片描述


2.3.2 复杂用法,正则表达式使用分组

eg:这个例子的意图是:把所有以“万”为单位的捐款,其金额改为‘元’。比如 :4万,改为40000元

var txt ='刘菲:5万。张常成:5000元。孙玉杰:2000元。李明轩:20万。李子豪:8500元。';
txt = txt.replace(/(\d+)(万)/g,function(){
    console.log(arguments);
    return arguments[1] + '0000' + '元';
});

console.log(txt);

输出结果是: 
在这里插入图片描述
 
replace()函数第一个参数是分组正则表达式,第二个参数是函数时:

  • arguments[0]是匹配到的子字符串
  • arguments[1]是匹配到的第1个分组项
  • arguments[2]是匹配到的第2个分组项
  • arguments[3]是匹配到的字符串的索引位置
  • arguments[4]是源字符串本身
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【JavaScript】详解JavaScript中的replace()函数 的相关文章

  • 取消html5浏览器中的单图请求

    我正在动态加载 大 图像以绘制到 html5 画布中 如下所示 var t new Image t onload t src http myurl 但每隔一段时间就会想取消图片请求完全地 我想出的唯一方法是设置src to i e t sr
  • 如何使用 selenium 和 Mocha 获取 xPath() 选择的锚标记的文本

    我已经成功选择了 a 标签 我想显示锚标记的文本 但无法这样做 我正在使用 selenium mocha javascript 和 phantomJS 这是我的脚本 详细 var assert require assert var test
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • 如何使用 JavaScript 中的值填充下拉列表?

    我在 Tridion CMS 扩展中的功能区工具栏按钮中添加了一个按钮 单击该按钮后 将显示一个弹出页面 其中包含两个下拉菜单 通过更改第一个下拉控件中的值 我应该填充第二个下拉控件的值 就我而言 我正在使用ASP drop down li
  • 消息“在 jest.setTimeout 指定的 5000 毫秒超时内未调用异步回调”

    我正在使用 Puppeteer 和 Jest 来运行一些前端测试 我的测试如下 describe Profile Tab Exists and Clickable settings user gt test Assert that you
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • Mybatis配置多数据源

    前言 Spring Boot项目使用Mybatis 既要从上游系统同步数据 又要操作本系统的数据库 所以需要引入双数据源 配置Mybatis 步骤 一 配置双数据源 连接数据库 1 禁用Spring Boot数据源的自动装配 在启动类 Sp
  • 请求调页存储管理方式的模拟 含详细代码和实验结果截图

    请求调页存储管理方式的模拟 实验目的 通过对页面 页表 地址转换和页面置换过程的模拟 加深对请求调页系统的原理和实现过程的理解 实验内容 假设每个页面中可存放10条指令 分配给一作业的内存块数为4 用C语言模拟一作业的执行过程 该作业共有3
  • 为什么Hadoop集群中机器台数多反而执行速度慢?

    这里我对这个现象给出解释 由于水平有限 发现错误 请及时留言 或站内和我联系 这里假设集群中有slave1 slave2 slave3三个节点 其中slave3工作效率低 一共有6个任务 需要去做 slave1和slave2执行一个任务是1
  • 104个精选计算机毕业设计项目,助你制作出色的程序,一定要试试

    对于即将面临毕业设计的计算机专业的同学们 如何选题和完成毕设项目成为一个重要而又棘手的问题 今天给大四的同学分享毕业设计项目 希望对正在为毕业设计发愁的小伙伴有帮助 一 成品列表 以下所有springboot框架项目的源码博主已经打包好上传
  • rpmbuild制作包的详细过程

    https www cnblogs com schangech p 5641108 html https www ibm com developerworks cn linux l rpm 一 目录结构生成 1 工具安装rpmdevtool
  • STM32之中断和事件

    中断和事件 什么是中断 当CPU正在执行程序时 由于发生了某种事件 要求CPU暂时中断当前的程序执行 转而去处理这个随机事件 处理完以后 再回到原来被中断的地方 继续原来的程序执行 这样的过程称为中断 什么是事件 当检测到某一个动作的触发
  • 内网 centos7 离线安装rpm包的三种方法

    一 使用 downloadonly参数 此种方法的优点是下载的rpm包可以下载至同一目录中 一 互联网电脑下载rpm包 1 查看互联网电脑是否支持 只下载不安装 功能 执行yum帮助命令 yum help 如果列表中出现 downloado
  • 文件操作之文件包含全解(31)

    文件包含的作用就是将这个文件包含进去之后 会调用指定文件的代码 先将文件包含才能执行里面的一些相关代码 比如所想进行文件的链接 数据库的查询 就可以先包含一个数据库的配置文件 再去链接的话就享有配置文件的一些配置信息 就不需要在进行相关的操
  • stegsolve图片隐写解析器的使用

    layout post title ctf 隐写图片解析器 stegsolve的使用 categories ctf tags stegsolve CTF隐写术 隐写图片解析神器 stegsolve stegsolve下载地址 http ww
  • 静态测试和动态测试相关知识点

    目 录 知识总结 5 第一章 5 第二章软件测试基础 5 第三章基于生命周期的软件测试 6 第四章软件测试的分类 6 第五章软件缺陷管理 6 第六章软件测试过程及其管理 7 静态测试 7 1
  • ubunt 上进行c++ cuda编程

    目录 概述 cmake代码 头文件代码 头文件对应的cuda代码实现 c 的代码 运行结果 参考资料 概述 首先先通过一个简单的demo来演示cuda编程是怎么进行的 cmake代码 cmake minimum required VERSI
  • 替换docker容器中的文件

    bin bash 宣告文件内的语法使用bash语法 于是当程序执行时 加载bash的相关环境配置文件 在shell脚本中 倒引号 括起来的表示要执行的命令 dirname 0 获取当前shell程序的路径 cd dirname 0 进入当前
  • ES6中const的使用

    const声明一个只读的常量 一旦声明 常量的值就不能改变 且const一旦声明变量 就必须立即初始化 不能留到以后赋值 const的作用域与let命令相同 只在声明所在的块级作用域内有效 const命令声明的常量也是不提升 同样存在暂时性
  • 目标检测:划分数据集,生成ImageSets\Main下的txt文档

    coding utf 8 Time 2020 6 1 Author WangKaiNing File xml2voc py import os import random 可能需要修改的地方 g root path D AAAAA bigd
  • Linux报错:tar: Error Is Not Recoverable: Exiting Now

    Linux操作系统下 下载完成xx tar gz文件然后执行tar zxvf xx tar gz 执行出现如下错误 xxx tar gz 归档文件中异常的 EOF tar 归档文件中异常的 EOF tar Error is not reco
  • 「ML 实践篇」分类系统:图片数字识别

    目的 使用 MNIST 数据集 建立数字图像识别模型 识别任意图像中的数字 文章目录 1 数据准备 MNIST 2 二元分类器 SGD 3 性能测试 1 交叉验证 2 混淆矩阵 3 查准率与查全率 4 P R 曲线 5 ROC 曲线 6 R
  • ActiveX控件开发、部署、使用(全)

    本文基于MFC的ActiveX控件开发 很大程度上和基于ALT的ActiveX控件编写有相同之处 首先创建基于MFC的ActiveX控件 OK一路下一步 完成 添加与外部接口 ClassView Lib Events ADD method
  • 51单片机c语言dac0832产生波形,单片机控制DAC0832产生各种波形Proteus仿真程序

    include sbit wr P3 6 sbit rd P3 2 sbit key0 P1 0 定义P1 0脚的按键为正弦波键key0 sbit key1 P1 1 定义P1 1脚的按键为方波键key1 sbit key2 P1 2 定义
  • Kafka 面试套路居然这样多!读完大神的 Kafka 核心手册,秒杀面试官!全网最强!!

    在热招的 Java 架构师岗位面试中 Kafka 面试题被面试官选中的几率非常大 也是 HR 的杀手锏和狠招 一般来讲 面试题有以下几种 Kafka 为什么这么快 如何对 Kafka 集群进行调优 Kafka 的高性能网络架构是如何设计的
  • 【JavaScript】详解JavaScript中的replace()函数

    replace 1 方法简介 2 replace 使用 2 1 replace 字符串 字符串 2 2 replace 正则表达式 字符串 2 3 replace 正则表达式 function 2 3 1 简单用法 正则表达式不使用分组 2