彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用。最近和前端走的比较近,借此机会,好好巩固一下相关知识点。链接:彻底搞懂javascript中的replace函数_慕课手记
1.初识replace
在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url
一个string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串本身
location.replace(url) 无痕跳转(将当前链接导航到一个新的url 并不保存历史记录)
与之相对的是location.href="url" 有痕跳转(将当前链接导航到一个新的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中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
- $.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
- 【JavaScript】详解JavaScript中的replace()函数
replace 1. 方法简介 2. replace()使用 2.1 replace(字符串,字符串) 2.2 replace(正则表达式,字符串) 2.3 replace(正则表达式,functio ...
- 针对还没搞懂javascript中this关键字的同学
本篇文章主要针对搞不清this指向的的同学们!不定期更新文章都是我学习过程中积累下的经验,还请大家多多关注我的文章以帮助更多的同学,不对的地方还望留言支持改进! 首先,必须搞清楚在JS里面,函数的几种 ...
- 搞懂JavaScript中的进制与进制转换
文章目录 进制介绍 进制转换 parseInt(str, radix) Number() +(一元运算符) Number.prototype.toString(radix) 自定义转换 十进制与十六进 ...
- proto文件支持继承吗_搞懂 Javascript中this 指向及继承原理
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的new 到底是干什么的 一.什么是 JS 原型链? 我们知道 JS 有对象,比如 var obj ...
- 彻底搞懂javascript中的match, exec的区别
在工作中经常发现一些同学把这两个方法搞混,以致把自己弄的很郁闷.所以我和大家一起来探讨一下这两个方法的奥妙之处吧. 我们分以下几点来讲解: 相同点: 1.两个方法都是查找符合条件的匹配项,并以数组形式 ...
- 在javascript中使用纯函数处理副作用
在javascript中使用纯函数处理副作用 今天给大家带来一片译文, 详情请点击这里.可能在墙内哦 开始了, 如果你点开这篇文章, 就证明你已经开始涉及函数式编程了, 这距离你知道纯函数的概念不会很 ...
- 五个小例子教你搞懂 JavaScript 作用域问题
原文:五个小例子教你搞懂 JavaScript 作用域问题 众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅 ...
最新文章
- 这些Python常用的工具和学习资源你都知道么?
- 女朋友羞辱我一线程序员35岁后没出路?该回二线发展!我没忍住,吼她两句!我错了吗?...
- flannel 的连通与隔离 - 每天5分钟玩转 Docker 容器技术(61)
- 每日一皮:小公司搞中台的真实写照..
- 【全真互联网下音视频技术创新应用】
- Qt5.2 for Android 配置及部署到手机运行
- 容易忽视但是功能灰常强大的Java API(五. 二分查找)
- 像搭“乐高”一样实现整合式网络安全体系
- phpfpm内存越来越高_内存时序越小越好,为什么DDR1到DDR4 时序值越来越高了?
- [渝粤教育] 西南科技大学 电气CAD 在线考试复习资料
- 操作系统原理,Windows线程调度,引发线程调度的事件,Windows线程优先级,Windows时间配额,Windows线程调度策略,Windows优先级提升事件
- 电机驱动软件学习笔记——数据打包解包CRC校验
- 你喜欢什么样的团队氛围
- android开发中磁场传感器,Android传感器(加速度传感器,磁场传感器,光线传感器,方向传感器)...
- 85款中国风字体!超级好看的古风系列
- 玩一玩Android下载框架
- execl筛选去重_Excel中表格筛选去重复项的操作方法
- maven-resources-plugin报红
- [VB.NET]单元四 窗体编程
- visio中公式太小_针织布的价格计算公式你学会了吗?
热门文章
- numpy数组array的shape属性-1维、2维···
- 使用 Chrome DevTools 模拟缓慢的 3G 网络速度
- 离线分析:Flume+Kafka+HBase+Hadoop通话数据统计
- Java输出最大值,最小值3种方法
- DevOps流水线(1)什么是Pipeline流水线?
- 【英语阅读】纽约时报 | 马云正式退休,但仍将影响阿里帝国
- 愿你三冬暖,愿你春不寒
- Node.js 调用 C++ 方法 / C++ Addons 详解
- 屏幕监控软件怎样监控电脑的扩展屏?
- 如何用VScode 进行调试