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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
Node.js实现文件上传
Jul 05 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
iconfont的三种使用方式详解
Aug 05 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
微信小程序云开发详细教程
May 16 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue webuploader 文件上传组件开发
2017/09/23 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vue组件的写法汇总
2018/04/12 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
个人自我鉴定写法
2013/11/30 职场文书
中学生个人自我评价
2014/02/06 职场文书
本科毕业生自荐信
2014/06/02 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
新店开张宣传语
2015/07/13 职场文书
实习报告范文
2019/07/30 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL