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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
JavaScript如何操作css
Oct 24 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数据缓存技术
2007/02/14 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
JS 控件事件小结
2012/10/31 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
大学竞选班长演讲稿
2014/04/24 职场文书
安全教育演讲稿
2014/05/09 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
毕业实习指导教师评语
2014/12/31 职场文书