深入理解 JavaScript 中的 replace 方法
2019独角兽企业重金招聘Python工程师标准>>>
字符串替换字符串
1
|
'I am loser!' .replace( 'loser' , 'hero' ) //I am hero!
|
直接使用字符串能让自己从loser变成hero,但是如果有2个loser就不能一起变成hero了。
1
|
'I am loser,You are loser' .replace( 'loser' , 'hero' ); //I am hero,You are loser
|
正则表达式替换为字符串
1
|
'I am loser,You are loser' .replace(/loser/g, 'hero' ) //I am hero,You are hero
|
使用正则表达式,并将正则的global属性改为true则可以让所有loser都变为hero
有趣的替换字符
replaceValue可以是字符串。如果字符串中有几个特定字符的话,会被转换为特定字符串。
字符 | 替换文本 |
$& | 与正则相匹配的字符串 |
$` | 匹配字符串左边的字符 |
$’ | 匹配字符串右边的字符 |
$1,$2,$,3,…,$n | 匹配结果中对应的分组匹配结果 |
使用$&字符给匹配字符加大括号
1
2
|
var sStr= '讨论一下正则表达式中的replace的用法' ;
sStr.replace(/正则表达式/, '{$&}' ); //讨论一下{正则表达式}中的replace的用法
|
使用$`和$’字符替换内容
1
2
|
'abc' .replace(/b/, "$`" ); //aac
'abc' .replace(/b/, "$'" ); //acc
|
使用分组匹配组合新的字符串
1
|
'nimojs@126.com' .replace(/(.+)(@)(.*)/, "$2$1" ) //@nimojs
|
replaceValue参数可以是一个函数
StringObject.replace(searchValue,replaceValue)中的replaceValue可以是一个函数.
如果replaceValue是一个函数的话那么,这个函数的arguments会有n+3个参数(n为正则匹配到的次数)
先看例子帮助理解:
1
2
3
4
5
6
7
|
function logArguments(){
console.log(arguments); //["nimojs@126.com", "nimojs", "@", "126.com", 0, "nimojs@126.com"]
return '返回值会替换掉匹配到的目标'
}
console.log(
'nimojs@126.com' .replace(/(.+)(@)(.*)/,logArguments)
)
|
参数分别为
匹配到的字符串(此例为nimojs@126.com,推荐修改上面代码的正则来查看匹配到的字符帮助理解)
如果正则使用了分组匹配就为多个否则无此参数。(此例的参数就分别为”nimojs”, “@”, “126.com”。推荐修改正则为/nimo/查看控制台中返回的arguments值)
匹配字符串的对应索引位置(此例为0)
原始字符串(此例为nimojs@126.com)
使用自定义函数将A-G字符串改为小写
1
2
3
|
'JAVASCRIPT' .replace(/[A-G]/g, function (){
return arguments[0].toLowerCase();
}) //JaVaScRIPT
|
使用自定义函数做回调式替换将行内样式中的单引号删除
1
2
3
4
5
6
7
|
'<span style="font-family:\'微软雅黑\';">demo</span>' .replace(/\ '[^' ]+\ '/g,function(){
var sResult=arguments[0];
console.log(sResult);//' 微软雅黑 '
sResult=sResult.replace(/\'/g,' ');
console.log(sResult); //微软雅黑
return sResult;
}) //<span style="font-family:微软雅黑;">demo</span>
|
最后的小试牛刀
这一节是交给阅读者发挥的内容:
1.使用函数自主实现替换字符
字符 | 替换文本 |
$& | 与正则相匹配的字符串 |
$` | 匹配字符串左边的字符 |
$’ | 匹配字符串右边的字符 |
使用正则但不使用以上替换字符方法来实现有趣的替换字符中的三个实例。
转载于:https://my.oschina.net/u/1403185/blog/187305
深入理解 JavaScript 中的 replace 方法相关推荐
- javascript中的replace方法
1.replace 调用方法str.replace(regexp|substr, newSubStr|function) regexp,正则表达式 substr,需要被替换的字符串 newSubStr ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- php event loop,理解javascript中的事件循环(Event Loop)
背景 在研究js的异步的实现方式的时候,发现了JavaScript 中的 macrotask 和 microtask 的概念.在查阅了一番资料之后,对其中的执行机制有所了解,下面整理出来,希望可以帮助 ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- 深入理解JavaScript中的属性和特性
深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...
- 理解JavaScript中的原型与原型链
理解JavaScript中的原型与原型链 原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...
- 彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
- 理解javascript中的回调函数(callback)
理解javascript中的回调函数(callback) 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Obje ...
- 来一轮带注释的demo,彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
最新文章
- mysql中index的作用,在mysql中使用INDEXES有什么好处?
- Python之迭代器和生成器
- 依赖注入通俗解释_我如何向团队解释依赖注入
- 名为 cursor_jinserted 的游标不存在_质量工程师必须了解的测量常识,你不知道怎么行...
- 【今日CV 视觉论文速览】29 Nov 2018
- C# 代码生成器 (存储过程生成方法)
- LeetCode刷题——80. 删除排序数组中的重复项 II
- ReactiveCocoa 5.0 初窥:可能是最痛的一次升级
- matlab %%?
- Java爬虫-使用爬虫下载千张美女图片!
- 最详细教学--实现win10 多用户同时远程登录内网机--win10+frp+rdpwrap+阿里云服务器
- c语言c9考试软件下载,二级c语言考试系统-无忧考吧二级c语言考试系统下载 v2018.09官方版--pc6下载站...
- html 做电脑桌面背景,适合做电脑桌面励志的壁纸素材
- Vue看板娘教程详细版
- 博客背景壁纸推荐(一)CSDN图床
- CSS基础常识问答(二)
- 计算机系统软件抗干扰,工控计算机软件抗干扰技术
- bi比较好的公司,bi商业智能软件排名
- 电视端虚拟鼠标的设计
- 工具变量:Shock-IV中预处理平衡的必要性
热门文章
- 用C#编写获取远程IP,MAC的方法
- libevent介绍
- 当前日期得到本周的开始和结束日期
- ASP.NET图象处理详解
- 设计模式之工厂方法模式(Factory Method)摘录
- 【网络编程】MarioTCP 流程图(一)
- java解析五元组_pcap文件解析,并且按照五元组分类
- vb.net 当前计算机用户,用VB写的一个组件,实现添加系统用户,并添加到指定组-.NET教程,VB.Net语言...
- 3 html语言是什么,HTML语言剖析(3)
- python字符串类库_Python 常用类库