当前位置:首页 > 日记 > 正文

javascript中replace使用方法总结

javascript中replace使用方法总结

ECMAScript提供了replace()方法。这个方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数。现在我们来详细讲解可能出现的几种情况。

1. 两个参数都为字符串的情况

 var text = 'cat, bat, sat, fat'; // 在字符串中找到at,并将at替换为ond,只替换一次 var result = text.replace('at', 'ond');// "cond, bat, sat, fat" console.log(result);

2. 第一个参数为RegExp对象,第二个参数为字符串

我们可以发现上面这种情况只替换了第一个at,如果想要替换全部at,就必须使用RegExp对象。

var text = 'cat, bat, sat, fat'; // 使用/at/g 在全局中匹配at,并用ond进行替换 var result = text.replace(/at/g, 'ond'); // cond, bond, sond, fond console.log(result);

3. 考虑RegExp对象中捕获组的情况 

RegExp具有9个用于存储捕获组的属性。$1, $2...$9,分别用于存储第一到九个匹配的捕获组。我们可以访问这些属性,来获取存储的值。

var text = 'cat, bat, sat, fat'; // 使用/(.at)/g 括号为捕获组,此时只有一个,因此所匹配的值存放在$1中 var result = text.replace(/(.at)/g, '$($1)'); // $(cat), $(bat), $(sat), $(fat) console.log(result);

4. 第二个参数为函数的情况,RegExp对象中不存在捕获组的情况

var text = 'cat, bat, sat, fat'; // 使用/at/g 匹配字符串中所有的at,并将其替换为ond, // 函数的参数分别为:当前匹配的字符,当前匹配字符的位置,原始字符串 var result = text.replace(/at/g, function(match, pos, originalText) {  console.log(match + ' ' + pos);  return 'ond' }); console.log(result); // 输出 /*  at 1 dd.html:12:9  at 6 dd.html:12:9  at 11 dd.html:12:9  at 16 dd.html:12:9  cond, bond, sond, fond dd.html:16:5 */

5. 第二个参数为函数的情况,RegExp对象中存在捕获组的情况

var text = 'cat, bat, sat, fat'; // 使用/(.at)/g 匹配字符串中所有的at,并将其替换为ond, // 当正则表达式中存在捕获组时,函数的参数一次为:模式匹配项,第一个捕获组的匹配项, // 第二个捕获组的匹配项...匹配项在字符串中的位置,原始字符串 var result = text.replace(/.(at)/g, function() {  console.log(arguments[0] + ' ' + arguments[1] + ' ' + arguments[2]);  return 'ond' }); console.log(result); // 输出 /*  cat at 1   bat at 6   sat at 11   fat at 16   cond, bond, sond, fond  */

以上为replace方法的所有可以使用的情况,下面我们使用replace和正则表达式共同实现字符串trim方法。

(function(myFrame) {  myFrame.trim = function(str) {   // ' hello world '   return str.replace(/(^\s*)|(\s*$)/g, '');  };  window.myFrame = myFrame; })(window.myFrame || {}); // 测试 var str = ' hello world ' console.log(str.length); // 15 console.log(myFrame.trim(str).length); // 11

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

每次打开excel2007都需要配置怎么

每次打开excel2007都需要配置怎么

配置,处理方法,怎么处理,电脑软件,  打开office2007被提示需要安装配置,然而配置安装完毕,第二次打开office2007还是会提示。这到底是怎么回事呢。下面给大家分享excel2007打开时配置的处理方法,欢迎大家来到学习。excel2007打开时配置的处…

手机QQ空间特别关心怎么取消啊

手机QQ空间特别关心怎么取消啊

取消,空间,电脑软件,QQ,  手机QQ空间特别关心怎么取消?下面小编就给大家分享下手机QQ空间取消特别关心的方法,希望可以帮助到大家,欢迎大家前来阅读!手机QQ空间特别关心怎么取消啊  1.点击底栏【我的空间】2.选择右上角的【好友】3.选择…

wps表格如何只让选中显示的单元格

wps表格如何只让选中显示的单元格

显示,方法,设置,表格,单元格,  如果有隐藏的行与列,如何快速的复制当前显示的部分,而不选中隐藏的?Excel是有这个功能的,如何在wps里找到?下面小编就来告诉你wps表格只让选中显示的单元格的操作步骤吧。wps表格只让选中显示的单元格的操作步…

jquery中each循环的简单回滚操作

jquery中each循环的简单回滚操作

回滚,操作,循环,简单,电脑软件,话不多说,请看代码:var ispass = true;var obj = new Object();$.each(data,function(i,td){  var sum=data[i].sum;  var num=data[i].num;  var id=data[i].num;  if(num>sum){ ispass=false; …

关于vue-router的beforeEach无限循

关于vue-router的beforeEach无限循

无限循环,电脑软件,vue,router,beforeEach,最近在使用vue-router的beforeEach钩子时候遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题代码如下:router.beforeEach((to, from, next) => { if(isLogin){ next() }e…

word如何设置字体背景色word设置字

word如何设置字体背景色word设置字

字体,背景色,设置,方法,步骤,  在对word文件进行编辑时候,有时候为了突出内容的重要性,需要给内容加上有一定颜色的背景。那么下面就由小编给大家分享下word设置字体背景色的技巧,希望能帮助到您。word设置字体背景色的步骤步骤一:打开这个软…

唯美情侣幸福个性签名大全

唯美情侣幸福个性签名大全

唯美,个性签名,情侣,热门,新篇, 个性签名各式各样,丰富多彩,反映出网民的不同的思想、心情等,情侣个性签名永远是唯美幸福的,本文是小编整理唯美情侣幸福个性签名的资料,仅供参考。唯美情侣幸福个性签名【经典篇】1. 你的嘴角沾满了阳光 一遇到…

怎么word中制作卡片word中制作卡片

怎么word中制作卡片word中制作卡片

步骤,方法,卡片,电脑软件,word,  Word2013文档编辑软件相比前面的几个版本,里面添加了很多有新意的功能,卡片功能就是其中之一。下面小编就教你怎么word中制作卡片。word中制作卡片的步骤1、鼠标左键双击计算机桌面Word2013程序图标,将其打…

qq如何开视频会议如何使用QQ进行视

qq如何开视频会议如何使用QQ进行视

视频会议,方法,如何使用,电脑软件,qq,  有时候需要和很多人一起视频会议,我们可以使用QQ进行视频会议。具体怎么操作?今天小编给你分享一下开启qq视频会议的方法,欢迎阅读。开启qq视频会议的方法建立和进入视频会议1首先登陆qq,点击界面右下…

Vue + Vue-router 同名路由切换数

Vue + Vue-router 同名路由切换数

数据,方法,路由,电脑软件,Vue,在默认情况下, 同名路由之间的切换, 由于组件可以服用, 放在ready里获取数据, 是不会执行的, 有两种方法可以解决注意: 该问题仅存在于 vue1方法1: 将数据获取放到route.data下~route: { data({to: {params: …

怎么用excel算出cpk值excel算出cpk

怎么用excel算出cpk值excel算出cpk

步骤,方法,电脑软件,excel,cpk,  有时候我们需要对产品的相关特性数据进行分析,利用数据统计工具制作过程能力控制图,从而计算出CPK值,下面小编教你怎么用excel算出cpk值。希望对你有帮助!excel算出cpk值的步骤收集你所需要控制的特性的数据,…

Excel2013图表如何制作达标图

Excel2013图表如何制作达标图

达标,图表,电脑软件,  通过设置坐标轴重叠来制作达标图,达标图可以直观地反映数据是否达到所规定的标准。以下是小编为您带来的关于Excel2013图表制作达标图,希望对您有所帮助。Excel2013图表制作达标图①启动Excel2013,首先打开先前准备好…