javascript中的replace函数(带注释demo)


Posted in Javascript onJanuary 07, 2018

javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用。最近和前端走的比较近,借此机会,好好巩固一下相关知识点。

1.初识replace

在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url

一个string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串本身

location.replace(url) 无痕跳转(将当前链接导航到一个新的url 并不保存历史记录)
与之相对的是location.href="url" rel="external nofollow" 有痕跳转(将当前链接导航到一个新的url 且保存历史记录) 这个没有比较清晰

string.replace函数 很多初学者,会认为这个跟C#中的Replace一样,但并不相同,js中replace更灵活。
最基本的用法 就是简单替换字符串。来看一个例子:

var str = "abcd-abcd-abcd";
var result = str.replace("a", "");
console.log(result);
//输出 bcd-abcd-abcd
//当第一个参数是一个简单字符串时,仅替换第一个匹配项

2.走进replace之正则表达式

参数一:正则表达式对象或字面量(支持gi模式) g全局匹配 i忽略大小写

参数二:要替换的字符串或一个function

可以使用正则表达式的相关引用

如果是function,则替换为function的返回值

此function的参数:

match 匹配的子串。(对应于上述的$&。)

p1,p2, ... 假如replace()方法的第一个参数是一个RegExp 对象,则代表第n个括号匹配的字符串。(对应于上述的$1,$2等。)

offset 匹配到的子字符串在原字符串中的偏移量。(比如,如果原字符串是“abcd”,匹配到的子字符串是“bc”,那么这个参数将是1)

string 被匹配的原字符串。

正则表达的引用

$$ 插入一个 "$"。
$& 插入匹配的子串。
$` 插入当前匹配的子串左边的内容。
$' 插入当前匹配的子串右边的内容。
$n 假如第一个参数是 RegExp对象,并且 n 是个小于100的非负整数,那么插入第 n 个括号匹配的字符串。

 3.来一轮带注释的demo,彻底搞懂javascript中的replace函数:

全局匹配:

var str = "abcd-abcd-abcd";
var result = str.replace(/a/g, "e");
console.log(result);
//输出 ebcd-ebcd-ebcd
//g全局匹配 所有a字符串都将被替换

忽略大小写匹配:

var str = "abcd-abcd-abcd";
var result = str.replace(/A/i, "e");
console.log(result);
// 输出 ebcd-abcd-abcd
// 忽略大小写的匹配 但没有进行全局匹配 所以只替换第一个a

忽略大小写且全局匹配:

var str = "abcd-abcd-abcd";
var result = str.replace(/A/gi, "e");
console.log(result);
// 输出 ebcd-ebcd-ebcd
// 忽略大小写并全局匹配 所有a都被替换

使用function作为第二参数:

var str = "abcd-abcd-1234";
var result = str.replace(/([a-z]*)-([a-z]*)/gi, function(match,p1,p2,offset,str){
  console.log(match);  //abcd-abcd 匹配的内容
  console.log(p1);  //第一个括号中匹配的内容
  console.log(p2);  //第二个括号匹配的内容
  console.log(offset);//0 匹配到的字符串的索引(偏移量) 
  console.log(str);  //原始字符串
  return [p1,p2].join("+");
});
console.log(result);
// 输出 abcd+abcd+1234
// 原字符串中 abcd-abcd 被匹配后 被替换为function返回的内容

在参数中引用正则表达式匹配项:

var str = "a b";
var result = str.replace(/(\w+)\s(\w+)/gi, "$2 $1");
console.log(result); 
//输出 b a 
// 这里的$1 $2分别引用正则表达式中第一个喝第二个括号匹配的内容

在参数中引用匹配项左侧内容:

var str = 'abc';
  var result = str.replace(/b/g, "$`"); //$`代表匹配字符的左侧内容
  console.log(result);
  //输出: aac

在参数中引用匹配项右侧内容:

var str = 'abc';
  var result = str.replace(/b/g, "$'"); //$'代表匹配字符的右侧内容
  console.log(result);
  //输出: acc

使用正则表达式对象:

var str = "a b";
 var reg = new RegExp(/(\w+)\s(\w+)/, "gi"); //也可以使用正则表示对象来最为参数
 var result = str.replace(reg, "$2 $1");
 console.log(result); //输出 b a

有了这些例子 加上开头的名词解释,相信你已经彻底搞懂了javascript中的replace函数!

总结

以上所述是小编给大家介绍的javascript中的replace函数(带注释demo),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 继承使用分析
May 12 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
基于JavaScript实现简单的音频播放功能
Jan 07 #Javascript
js实现复制功能(多种方法集合)
Jan 06 #Javascript
tangram.js库实现js类的方式实例分析
Jan 06 #Javascript
JavaScript寄生组合式继承实例详解
Jan 06 #Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 #Javascript
jQuery中库的引用方法
Jan 06 #jQuery
You might like
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
毕业生的自我评价
2013/12/30 职场文书
自荐信格式简述
2014/01/25 职场文书
企业管理培训感言
2014/01/27 职场文书
消防先进事迹材料
2014/02/10 职场文书
店面销售职位的职责
2014/03/09 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
学生会个人总结范文
2015/02/15 职场文书
法院个人总结
2015/03/03 职场文书
首次购房证明
2015/06/19 职场文书
Python数据结构之队列详解
2022/03/21 Python