javascript中replace( )方法的使用


Posted in Javascript onApril 24, 2015

最近在浏览一些阿里的前端面试题,其中有一题涉及了javascript中replace( )方法的使用,下面是原题:

“说出以下函数的作用是?空白区域应该填写什么?”

// define 
 (function (window) { 
   function fn(str) { 
     this.str = str; 
   } 
   fn.prototype.format = function () { 
     var arg = ______; 
     return this.str.replace(_______, 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') ); 
 })();

以下是分析过程(感觉还是弄个编号,个人觉得比较有条理一些)

1、因为本题也涉及了到其它的知识点,如匿名函数、原型等知识点,但不是本次讨论的重点。

2、根据题面,我们知道,该题的源码类似于写一个模板引擎。将模板里的‘{1}'之类的占位符替换成传给它的参数。所以arg应该就是arguments。但是!!!由于arg不是数组,而是一个类数组对象(不懂的可自行百度(u_u)),所以我们需要进行一些转换,

var arg=Array.prototype.slice.call(arguments,0);

3、等号右边也就是第一空的答案了。说了这么多,那么接下来第二空就是我们要讨论的重点了~~~~~~我们都知道第二空是要通过正则找出占位符,并根据占位符内的数字将其替换成arg数组内的字符串,说实话replace方法的第二个参数为函数的情况很少遇到,一般我们遇到都是这样的,看下面的代码:

 var pattern=/8(.*)8/;

 var str='This is a 8baidu8';

 document.write(str.replace(pattern,'<strong>$1</strong>'));

4、由于replace第二个参数是函数的情况比较少,那么我们就来重点谈谈第二个参数为函数的情形。

首先这是replace函数的语法:stringobject.replace(regexp/substr,replacement)

其中regexp/substr必需。规定字符串或要替换的模式的regexp对象。(请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 regexp 对象。) replacement必需。一个字符串值。规定了替换文本或生成替换文本的函数。最后返回一个新的字符串,是用replacement替换了regexp的第一次匹配或所有匹配之后得到的。

5、ECMAScript规定,replace()方法的参数replacement可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将替换文本使用。第一个参数表示匹配到的字符,第二个参数表示匹配到的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符串(RegExp.input)。

6、所以第二空可以这样写:/\{(\d+)\}/g,放在语句中完整为:

return this.str.replace(/\{(\d+)\}/g, function (a, b) {  

    return arg[b] || '';  

});

执行第一次匹配时,{0}被替代为arg[0]
执行第一次匹配时,{1}被替代为arg[1]
执行第一次匹配时,{2}被替代为arg[2]

7、以上就是js字符串方法replace()的第二个参数为函数讲解(有不完善的地方,自行补充),当然这道面试题也解决了~~~~~

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 #Javascript
原生js制作简单的数字键盘
Apr 24 #Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 #Javascript
Node.js实现Excel转JSON
Apr 24 #Javascript
js中for in语句的用法讲解
Apr 24 #Javascript
JScript中的条件注释详解
Apr 24 #Javascript
You might like
php实现jQuery扩展函数
2009/10/30 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
JS跨域代码片段
2012/08/30 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python实现画出e指数函数的图像
2019/11/21 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
如何写好升职自荐信
2014/01/06 职场文书
三年级音乐教学反思
2014/01/28 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
保护环境倡议书
2014/04/14 职场文书
快递员岗位职责
2014/09/12 职场文书
销售辞职信范文
2015/03/02 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
社区党务工作总结2015
2015/05/19 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS