JS正则表达式替换字符串replace()方法实例代码

目录
  • replace()方法介绍
  • 简单用法
  • 重点:函数替换
  • 补充：替换特殊字符
  • 总结

replace()方法介绍

replace()方法执行搜索替换操作。

它接收一个正则表达式作为第一个参数, 接收一个替换字符串作为第二个参数。

它搜索调用它的字符串, 寻找与指定模式匹配的文本。

如果正则表达式带g标志, replace()方法会替换字符串中的所有匹配项; 否则, 它只替换第一个匹配项。

如果replace()方法的第一个参数是一个字符串而非正则表达式, 这个方法会按照字面值进行搜索。

简单用法

let text = 'my name is hu,you NAME is zhang';

// 因为字符串是不可修改的对象所以要赋值给一个新变量, 也可以对其重新赋值
text = text.replace(/name/gi,'like'); // 标志g表示全局匹配,标志i表示不区分大小写

console.log(text); // my like is hu,you like is zhang

不过replace()方法的能力远不止这些。比如在正则表达式中用括号()分组的子表达式是从左到右编号的, 而且正则表达式能记住每个子表达式匹配的文本。如果替换字符串中出现了$符号后面跟一个数字(例如$1代表第一组子表达式), replace()会将这两个字符替换为指定的子表达式匹配的文本。

let str = 'abcdeABCDE';

// 其中$1代表第一组(b),$2代表第二组(c)
str = str.replace(/(b)(c)/gi,'b$1bc$2c');  // 给b两边来个b,给c两边来个c

console.log(str); // abbbcccdeAbBbcCcDE

如果正则表达式中使用的是命名捕获组, 则可以通过名字而非数字来引用匹配的文本, 如果使用命名捕获组就要把名字写到$<名字>中:

let str = 'abcdABCD';
str = str.replace(/(?<group1>bc)/gi,'[$<group1>]'); // 给bc套个中括号
console.log(str); // a[bc]dA[BC]D

重点:函数替换

除了给replace()的第二个参数传替换字符串, 还可以传一个函数, 这个函数会被调用然后用来计算替换的值, 如果匹配到多个值则会对每个值进行一次计算替换。这个替换函数在被调用时会接收几个参数, 第一个参数是匹配的整个文本:

let str = '小明有-100元,小李有5元,小张有-10元';
// 对其中的钱进行绝对值操作
str = str.replace(/-?\d+/g,function(s){
    let num = parseInt(s);
    if(num < 0){
        // 如果小于0就让它乘-1
        num *= -1;
    }
    // 返回结果对其进行替换
    return num;
})
console.log(str); // 小明有100元,小李有5元,小张有10元

然后, 如果正则表达式有捕获组, 则后面几个参数分别是这些捕获组匹配的子字符串。对以上代码进行修改:

let str = '小明有-100元,小李有5元,小张有-10元';
// 对其中的钱进行绝对值操作
str = str.replace(/(\d+)|(-\d+)/g,function(s,first,last){
    // s代表匹配的整个字符串,first代表第一组为正数,last代表第二组为负数
    if(first){
        // 如果正数直接返回
        return first;
    }else{
        // 如果负数让其乘-1
        return parseInt(last)*-1;
    }
})
console.log(str); // 小明有100元,小李有5元,小张有10元

补充：替换特殊字符

要替换特殊字符，例如 -/\\^$*+?.()|[]{})，需要使用反斜杠对其转义。

如果给定字符串 this\\-is\\-my\\-url，要求把所有转义的减号（ \\-）替换为未转义的减号（-）。

可以用 replace() 做到：

const myUrl = 'this\-is\-my\-url';
const newUrl = myMessage.replace(/\\-/g, '-');
console.log(newUrl); // this-is-my-url

或者用new Regexp()：

const myUrl = 'this\-is\-my\-url';
const newUrl = myUrl.replace(new RegExp('\-', 'g'), '-');
console.log(newUrl); // this-is-my-url

在第二个例子中不必用反斜杠来转义反斜杠。

总结

到此这篇关于JS正则表达式替换字符串replace()方法的文章就介绍到这了,更多相关JS正则替换字符串replace()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS代码如何获取map的key

    JS代码如何获取map的key

    目录 JS获取map的key JS map根据value获取key 测试数据 根据key获取value 根据value获取key JS获取map的key Object.keys(map) //获取回来集合大家可以试一下 JS map根据value获取key 前端通过对象保存字典值用于列表字段翻译或者加载下拉框都是很常见的操作,有时也会需要根据字典值的value获取对应的key,搜了下相关的文章比较少,在此记录下. 测试数据 paramsMap: { orderType: { '0': '咨询',

  • JavaScript代码不能被阻断的稳定性建设

    JavaScript代码不能被阻断的稳定性建设

    目录 背景 最常见的js被阻断的情况 解决办法 容易被我们忽视的点 1. 没考虑到错误上报 2. 错用throw 3. 异步代码catch不到,还是会被阻断 4. import()和require()的错误捕获表现不一致 背景 稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因,导致出错,进而整个后续代码有可能都被阻断.直接影响线上的稳定性 最常见的js被阻断的情况 console.log(111) // 预期 a = {} // 结果 a = undefined a.a

  • JS前端可扩展的低代码UI框架Sunmao使用详解

    JS前端可扩展的低代码UI框架Sunmao使用详解

    目录 引言 设计原则 1. 明确不同角色的职责 2. 发挥代码的威力,而不是限制 3. 各个层面的可扩展性 4. 专注而不是发散 Sunmao 的工作原理 响应最新的状态 组件间交互 布局与样式 类型安全 在组件间复用代码 可扩展的可视化编辑器 保持开放 引言 尽管现在越来越多的人开始对低代码开发感兴趣,但已有低代码方案的一些局限性仍然让大家有所保留.其中最常见的担忧莫过于低代码缺乏灵活性以及容易被厂商锁定. 显然这样的担忧是合理的,因为大家都不希望在实现特定功能的时候才发现低代码平台无法支持,

  • 利用JavaScript实现创建虚拟键盘的示例代码

    利用JavaScript实现创建虚拟键盘的示例代码

    目录 前言 项目基本结构 JavaScript 虚拟键盘的显示 虚拟键盘的按钮 CSS的键盘按钮设计 使用 JavaScript 激活虚拟键盘 前言 在线演示地址 项目基本结构 目录结构如下: 这是一个简单的 JavaScript 教程,教你如何创建JavaScript 虚拟键盘.虚拟键盘是一种屏幕输入法,如果你使用的是 Windows 操作系统,我相信你应该也使用过 Windows 中的默认虚拟键盘. 首先,我创建了一个可以看到输入字符的结果框,也就是我们可以在其中看到所有信息的显示器.此虚拟

  • 使用JS实现一个Sleep函数的示例代码

    使用JS实现一个Sleep函数的示例代码

    目录 前言 1.目标分析 2.setTimeout 封装 3.Promise 封装 4.async/await 总结 前言 我们都是 JavaScript 是一个单线程语言,单线程有它的好处也有它的坏处.在我们熟知的如 Java.C++等语言中,都提供了一个叫做 Sleep 的内置函数.这个函数的作用就和它的名字一样:睡眠. 假设我们有这样一个场景:我们需要在项目运行起来后的十分钟之后去执行一段代码,这段代码可以是符合你业务场景的任何代码,比如查看内存占用多少等等. 在 Java 这类语言中,可

  • JavaScript实现无缝轮播图的示例代码

    JavaScript实现无缝轮播图的示例代码

    目录 上效果 一.实现过程 1)首先实现基本布局 2)主要样式 二.如何实现无缝呢 (重点来了) 思路: 主要代码 完整代码 花费一个下午从0到1实现的轮播图,当然还有很多需要改进的地方(欢迎提出需要改进的地方),等我再努力努力,将其封装成一个组件. 上效果 一.实现过程 1)首先实现基本布局 <div class="carousel-container"> //图片列表 <div class="carousel-list"></div

  • JS正则表达式替换字符串replace()方法实例代码

    目录 replace()方法介绍 简单用法 重点:函数替换 补充:替换特殊字符 总结 replace()方法介绍 replace()方法执行搜索替换操作. 它接收一个正则表达式作为第一个参数, 接收一个替换字符串作为第二个参数. 它搜索调用它的字符串, 寻找与指定模式匹配的文本. 如果正则表达式带g标志, replace()方法会替换字符串中的所有匹配项; 否则, 它只替换第一个匹配项. 如果replace()方法的第一个参数是一个字符串而非正则表达式, 这个方法会按照字面值进行搜索. 简单用法

  • SQL Server中利用正则表达式替换字符串的方法

    建立正则替换函数,利用了OLE对象,以下是函数代码: --如果存在则删除原有函数 IF OBJECT_ID(N'dbo.RegexReplace') IS NOT NULL DROP FUNCTION dbo.RegexReplace GO --开始创建正则替换函数 CREATE FUNCTION dbo.RegexReplace ( @string VARCHAR(MAX), --被替换的字符串 @pattern VARCHAR(255), --替换模板 @replacestr VARCHAR

  • JS中实现replaceAll的方法(实例代码)

    第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符. 而str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志). replace() The replace() method returns the string that results when you replace text matching its first argumen

  • JavaScript正则表达式替换字符串中图片地址(img src)的方法

    本文实例讲述了JavaScript正则表达式替换字符串中图片地址(img src)的方法.分享给大家供大家参考,具体如下: 今天开发中遇到一个问题:如何替换一段HTML字符串中包含的所有img标签的src值? 开始想到的解决方法是: content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match) { console.log(match); }); 输出结果是: 复制代码 代码如下: &

  • JS正则表达式替换url参数的方法

    具体代码如下所示: /* 定义替换对象键值 */ var setReferArgs = function(){ var referArgs = new Object(); referArgs['#userID\#'] = userId; referArgs['\#userName\#'] = userName; return referArgs; } /* 替换URL的参数 */ var replaceUrlParams = function(url){ var actualUrl = "&qu

  • JavaScript使用replace函数替换字符串的方法

    本文实例讲述了JavaScript使用replace函数替换字符串的方法.分享给大家供大家参考.具体如下: JavaScript通过replace函数替换字符串,下面的代码将Visit Microsoft中的MicroSoft替换成jb51.net <!DOCTYPE html> <html> <body> <p> Click the button to replace "Microsoft" with "jb51.net&qu

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

  • 原生js实现each方法实例代码详解

    jquery里面有个each方法,将循环操作简化.便捷. 随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型.且无法通过return true达到continue效果. 此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用. 在不使用 jquery 的 each 方法时,该如何处理:或者说用原生如何来实现? 前些前写了个类库: jTool , 其中就实现了该方法. 简单实现: // 通过字面量方式实现的函数each var

  • js字符串倒序的实例代码

    1. var reverse = function( str ){ var newStr = '', i = str.length; for(; i >= 0; i--) { newStr += str.charAt(i); } return newStr; }; reverse('abcde') 2. var reverse = function( str ){ return str.split('').reverse().join(''); }; 3.(类似法2) var reverse =

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

随机推荐