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 相关文章推荐
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
理解AngularJs指令
Dec 10 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
基于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
一周学会PHP(视频)Http下载
2006/12/12 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python框架中flask知识点总结
2018/08/17 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Django实现文件上传下载
2019/10/06 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
会计自我鉴定
2013/11/02 职场文书
商务专员岗位职责
2013/11/23 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
百年校庆节目主持词
2014/03/27 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
小学数学教师研修日志
2015/11/13 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js