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实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
javascript实现扫雷简易版
Aug 18 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
公司任命书范本
2014/06/04 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
个人借款协议书范本
2014/11/17 职场文书
开票证明
2015/06/23 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
关于mysql中string和number的转换问题
2022/06/14 MySQL