博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浅谈replace()
阅读量:5252 次
发布时间:2019-06-14

本文共 2209 字,大约阅读时间需要 7 分钟。

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 = 'some textsome text2some text3some text4some text5some text6';var iable1 ='some textsome text2some text3some text4some text5some text6';

问题是如何从iable转化为iable1,也就是怎么做才能把some text2、some text4和some text6后的</td>替换为</td></tr><tr>

var variable = 'some textsome text2some text3some text4some text5some text6';var reg = /(.*?<\/td>.*?)<\/td>/g;alert(variable.replace(reg, '$1'));

这个是其中一个用户给出的答案,用的是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('

{1}{2}

'); 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),第三个参数表示被匹配的字符在整个字符串的位置,第四个参数表示被匹配的整个字符串。

了解了这几个参数是什么,相信对于函数传参的使用也就信手拈来了。

 

转载于:https://www.cnblogs.com/open-wang/p/5294216.html

你可能感兴趣的文章
110104_LC-Display(液晶显示屏)
查看>>
httpd_Vhosts文件的配置
查看>>
php学习笔记
查看>>
普通求素数和线性筛素数
查看>>
PHP截取中英文混合字符
查看>>
【洛谷P1816 忠诚】线段树
查看>>
电子眼抓拍大解密
查看>>
poj 1331 Multiply
查看>>
tomcat7的数据库连接池tomcatjdbc的25个优势
查看>>
Html 小插件5 百度搜索代码2
查看>>
P1107 最大整数
查看>>
多进程与多线程的区别
查看>>
Ubuntu(虚拟机)下安装Qt5.5.1
查看>>
java.io.IOException: read failed, socket might closed or timeout, read ret: -1
查看>>
java 常用命令
查看>>
CodeForces Round #545 Div.2
查看>>
卷积中的参数
查看>>
51nod1076 (边双连通)
查看>>
Item 9: Avoid Conversion Operators in Your APIs(Effective C#)
查看>>
深入浅出JavaScript(2)—ECMAScript
查看>>