javascript中replace使用方法总结


Posted in Javascript onMarch 01, 2017

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

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

Javascript 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
jQuery validate 验证radio实例
Mar 01 #Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 #Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 #Javascript
分分钟玩转Vue.js组件(二)
Mar 01 #Javascript
js实现带三角符的手风琴效果
Mar 01 #Javascript
JavaScript拖动层Div代码
Mar 01 #Javascript
vue组件间通信解析
Mar 01 #Javascript
You might like
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php导出CSV抽象类实例
2014/09/24 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
python 写入csv乱码问题解决方法
2016/10/23 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python实现抖音点赞功能
2019/04/07 Python
Tensorflow 实现释放内存
2020/02/03 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Pycharm安装python库的方法
2020/11/24 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
元旦晚会邀请函
2014/02/01 职场文书
开工仪式主持词
2014/03/20 职场文书
行政专员求职信范文
2014/05/03 职场文书
商场消防安全责任书
2014/07/29 职场文书
2014年班组工作总结
2014/11/20 职场文书
行政文员岗位职责
2015/02/04 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
导游词之包公祠
2019/11/25 职场文书