浅谈replace()
replace()简单介绍
replace()基本语法是String.replace(searchValue,replaceValue),其中searchValue为字符串或者正则,replaceValue为字符串或者函数。对于第一个参数为字符串是很简单的。
var str = 'hello world';
str.replace('h','H');//Hello world
这算是最基本的的替换了。如果仅仅只用到这种替换的话,我只能说真是太无趣了。我们把正则拉出来,处理复杂的替换,用函数来实现逻辑上的难点。
深入了解replace()
1.第二个参数为字符串
如果第二个参数是字符串,还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中,下表列出了ECMAScript提供的这些特殊的字符序列。
字符 | 替换文本 |
$& | 与正则相匹配的字符串 |
$` | 匹配字符串左边的字符 |
$’ | 匹配字符串右边的字符 |
$n(n=1~99) | 匹配结果中对应的分组匹配结果 |
我们用这些特殊字符序列实现一些复杂的功能。先来看看调换位置。
var str = "hello world";
var rep = /(\w+)\s(\w+)/;
str.replace(rep, "$2, $1");
通过这些字符序列还可以对str做一些特殊的处理,比如说将‘hello’加上[]
var str = "hello world";
var rep = /(\w+)/;
console.log(str.replace(rep, "[$1]"));
看一个stackoverflow上的问题
var iable = '<td>some text</td><td>some text2</td><td>some text3</td><td>some text4</td><td>some text5</td><td>some text6</td>';
var iable1 ='<td>some text</td><td>some text2</td></tr><tr><td>some text3</td><td>some text4</td></tr><tr><td>some text5</td><td>some text6</td></tr><tr>';
问题是如何从iable转化为iable1,也就是怎么做才能把some text2、some text4和some text6后的</td>替换为</td></tr><tr>
var variable = '<td>some text</td><td>some text2</td><td>some text3</td><td>some text4</td><td>some text5</td><td>some text6</td>'; var reg = /(<td>.*?<\/td><td>.*?)<\/td>/g; alert(variable.replace(reg, '$1</tr><tr>'));
这个是其中一个用户给出的答案,用的是replace函数,当然还有其他的更简单的一些方法,有兴趣的可以去看看。
对于replace(),能把正则理解透彻,这些替换也就不难了。
2.第二个参数是函数
函数为replace()增加了很多的灵活性,在实际应用中个人感觉会用到很多(还莫有写太多h5),因为我们会用到太多的交互,用函数传参就很好实现了。
(function (window) {
function fn(str) {
this.str = str;
}
fn.prototype.format = function () {
var arg =Array.prototype.slice.call(arguments,0);return this.str.replace(/\{(\d+)\}/g, function (a, b) {
return arg[b] || '';
});
}
window.fn = fn;
})(window);
// use
(function(){
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') );
})();
这个是阿里巴巴一个面试题,具体考的是什么,还有函数是怎么实现的我就不多说了,我们主要来看下a和b的值对应的是什么。从arg[b]可以看出b应该是数字,应为arg是数组,而且根据format()所传的参数能推断出b为0,1,2。那么a是什么呢?我们可以把arg[b]换成a,然后运行,看下结果是什么。打印结果是“<p><a href="{0}">{1}</a><span>{2}</span></p>”,看到结果的我也是惊了个呆,赶紧查看是不是哪出错了,仔细看了下才发现a原来是匹配的字符,恍然大悟。
其实传入的函数还有另两个参数,我们把它们写进去,分别为c和d,然后按照同样的方法进行打印,也就得到c和d所代表的内容。那么这4个参数:第一个参数表示匹配到的字符,第二个参数表示匹配到的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符在整个字符串的位置,第四个参数表示被匹配的整个字符串。
了解了这几个参数是什么,相信对于函数传参的使用也就信手拈来了。
浅谈replace()的更多相关文章
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈JavaScript浮点数及其运算
原文:浅谈JavaScript浮点数及其运算 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...
- 浅谈 PHP 神盾的解密过程
原文:浅谈 PHP 神盾的解密过程 前些日子一个朋友丢了个shell给我,让我帮忙解密,打开源码看了下写着是 “神盾加密” , 牛逼闪闪的样子.百度下发现神盾是个很古老的东西,最后一次更新是在 201 ...
- 浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格 等 ...
- 浅谈Windows环境下DOS及MS-DOS以及常见一些命令的介绍
浅谈Windows环境下DOS及MS-DOS以及常见一些命令的介绍 前记 自己是搞编程的,首先我是一个菜鸟,接触计算机这么久了,感觉很多计算机方面的技术和知识朦朦胧胧.模模糊糊,貌似有些贻笑大方了:所 ...
- SpringBoot2.x使用EasyPOI导入Excel浅谈
SpringBoot2.x使用EasyPOI导入Excel浅谈 平时经常遇到客户要帮忙导入一些数据到数据库中,有些数据比较多有时候手动录入就会很耗时间,所以就自己写一个Excel导入的demo记录一下 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 浅谈 cxx rope
一般说的浅谈是永远不会短的 然后$qwq$本宝宝并不想讲实现原理 会用就行了呗 然后方便起见,本文规定数组$a$的第$1$位为$a[0]$ 并且本文的所有$debug$为了方便看到我们$rope$长度 ...
- 浅谈Windows API编程
WinSDK是编程中的传统难点,个人写的WinAPI程序也不少了,其实之所以难就难在每个调用的API都包含着Windows这个操作系统的潜规则或者是windows内部的运行机制…… WinSDK是编程 ...
随机推荐
- reactor工作模型
- ASP.NET页面之间传值Application(5)
Application对象的作用范围是整个全局,也就是说对所有用户都有效.它在整个应用程序生命周期中都是有效的,类似于使用全局变量一样,所 以可以在不同页面中对它进行存取.它和Session变量的区别 ...
- BZOJ4488 JSOI2015最大公约数
显然若右端点确定,gcd最多变化log次.容易想到对每一种gcd二分找最远端点,但这样就变成log^3了.注意到右端点右移时,只会造成一些gcd区间的合并,原本gcd相同的区间不可能分裂.由于区间只有 ...
- 【南开OJ2264】节操大师(贪心+二分+并查集/平衡树)
好久没更新了,今天就随便写一个吧 题目内容 MK和他的小伙伴们(共n人,且保证n为2的正整数幂)想要比试一下谁更有节操,于是他们组织了一场节操淘汰赛.他们的比赛规则简单而暴力:两人的节操正面相撞,碎的 ...
- Powershell快速入门
Powershell快速入门 来源: https://blog.csdn.net/u011054333/article/details/72567590 https://blog.csdn.net/u ...
- C#范型实例化对象
T s = System.Activator.CreateInstance<T>();
- 2018宁夏邀请赛K Vertex Covers
题目链接:https://nanti.jisuanke.com/t/28411 题意: 给出n(n<=36)个点的一个图.求点覆盖集数. 题解: 将n个点折半为L和R两部分.对于R内部的边,枚举 ...
- number 解题报告
number 题目描述 给定整数 \(m,k\),求出正整数 \(n\) 使得 \(n+1,n+2,-,2n\) 中恰好有 \(m\) 个数在二进制下恰好有 \(k\) 个 \(1\). 有多组数据. ...
- Maven如何打包本地依赖包
有的jar包,在maven中心库里面是没有的,那么,如何在项目中使用呢? 假设我们需要使用:apache-ant-zip-2.3.jar 将该jar包,放在项目的lib目录,例如: 在pom.xml里 ...
- IE浏览器被固定启动时访问某网页的处理方法
一.问题的提出 有些windows的GHOST系统在镜像成使用系统后或者正规安装的windows系统在安装金山毒霸.360杀毒软件后,IE浏览器一打开就自动打开某个指定的网站. 二.问题的分析 1.I ...