浅谈jQuery中replace()方法


Posted in Javascript onMay 13, 2015

今天在读jquery源码时,发现一个以前自己不曾注意过得问题,就是replece()的第二个参数为函数时的问题,以前只是知道replace()的第二个参数可以为函数,但是不知道该怎么操作,今天看到源码里用到了函数作为replace()的第二个参数时,感觉自己读起来比较吃力,于是准备整理下这个函数...

语法

stringObject.replace( regexp/substr, replacement)

返回值

返回一个新的字符串,是用replacement替换了regexp的第一次匹配或所欲匹配之后得到的

当replace()方法的参数replacement是函数时,在这种情况下,每个匹配都调用该函数,函数返回的字符串作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串,可以有0个或多个这样的参数。接下来的参数是一个整数,声明了匹配在stringObject中出现的位置。最后一个参数是stringObject本身。这席话是抄至w3cschool,对于现在的我来说以上的那段话我看着不是很明白,也不能用自己的话来简单描述下,所以只能用实例来说明这一切

var string = "abc123-ii";

string.replace(/(\d)-([\da-z])/g,function( str1, str2, str3,str4,str5){

         console.log( str1 );// 3-i

         console.log( str2 );// 3(第一个捕获)

         console.log( str3 );// i(第二个不捕获组)

         console.log( str4 );// 5(匹配在string中出现的位置)

         console.log( str5 );// abc123-ii(string本身)

         return "I";

})

以上是今天我在看jquery源码

camelCase: function( string ) {

        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );

    },

fcamelCase = function( all, letter ) {

        return letter.toUpperCase();

    };

时所引发的一些不明白,感觉现在自己对这个函数懂了的样子

然后现在我又想起不知道在以前什么时候,自已在用repleace()所遇到的对于那时的我来说是怪符号,形如“$1,$2”等等。现在夜来对这一问题来做一个解答了

$1,$2, $3.....表示捕获1,2,3....

var string = "abc123-ii";

console.log(string.replace(/(\d)-([\da-z])/g, "$1")); // 用捕获组1(3)去替换/(\d)-([\da-z])/g
 

$&表示与regexp相匹配的子串

var string = "abc123-ii";

console.log(string.replace(/(\d)-([\da-z])/g, "$&")); // 用与regexp相匹配的字串(3-i)去替换/(\d)-([\da-z])/g

$`表示位于匹配子串左侧的文本

var string = "abc123-ii";

console.log(string.replace(/(\d)-([\da-z])/g, "$`")); // 用匹配字串左侧的文本(abc12)去替换/(\d)-([\da-z])/g

$'表示位于匹配子串右侧的文本

var string = "abc123-ii";

console.log(string.replace(/(\d)-([\da-z])/g, "$‘")); // 用位于匹配字串右侧的文本去替换/(\d)-([\da-z])/g

 $$直接为$符号

var string = "abc123-ii";

console.log(string.replace(/(\d)-([\da-z])/g, "$$")); // 用$符号去替换/(\d)-([\da-z])/g

以上是自己对于replace()方法使用不明确的地方,本人前端小白,如果有写的不对的地方,或者有关于此方法更好用法的实例希望各位看官能够分享...

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

Javascript 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
json 实例详细说明教程
Oct 31 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 #Javascript
JS实现模拟风力的雪花飘落效果
May 13 #Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 #Javascript
浅谈javascript中的闭包
May 13 #Javascript
jQuery构造函数init参数分析续
May 13 #Javascript
jQuery构造函数init参数分析
May 13 #Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 #Javascript
You might like
php中的strpos使用示例
2014/02/27 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
js常用排序实现代码
2010/12/28 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
解决python 找不到module的问题
2020/02/12 Python
python怎么对数字进行过滤
2020/07/05 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
EJB实例的生命周期
2016/10/28 面试题
医院反腐倡廉演讲稿
2014/09/16 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
个人欠条范本
2015/07/03 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书