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 multiSelect 多选下拉框
Jul 09 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
浅析node.js的模块加载机制
May 25 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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将session放入memcached的设置方法
2014/02/14 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
JS实现购物车特效
2017/02/02 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
wxPython多个窗口的基本结构
2019/11/19 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
群众路线剖析材料
2014/02/02 职场文书
中学生运动会入场词
2014/02/12 职场文书
2014国培学习感言
2014/03/05 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
中职生自荐信范文
2014/06/15 职场文书
美术教师求职信范文
2015/03/20 职场文书
运动会广播稿200字
2015/08/19 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android