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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 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效率,提高php性能的一些方法
2011/03/24 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP的引用详解
2015/02/22 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
layui实现三级联动效果
2019/07/26 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
python GUI实例学习
2017/11/21 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
什么是Assembly(程序集)
2014/09/14 面试题
自荐书格式
2013/12/01 职场文书
创先争优制度
2014/01/21 职场文书
运动会通讯稿100字
2014/01/31 职场文书
教师简历自我评价
2014/02/03 职场文书
护士毕业生自荐信
2014/02/07 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
英语教学课后反思
2016/02/15 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
java项目构建Gradle的使用教程
2022/03/24 Java/Android