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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
简述JS控制台的使用
Jul 15 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
JS实现分页导航效果
Feb 19 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
文件上传的实现
2006/10/09 PHP
生成卡号php代码
2008/04/09 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
JS高级运动实例分析
2016/12/20 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python自定义线程类简单示例
2018/03/23 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python 字典的打印实现
2019/09/26 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
兰兰过桥教学反思
2014/02/08 职场文书
汉字听写大会观后感
2015/06/12 职场文书
HAM-2000摩机图
2021/04/22 无线电
以下牛机,你有几个
2022/04/05 无线电