浅谈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 相关文章推荐
jquery简单体验
Jan 10 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
JS定时关闭窗口的实例
May 22 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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 substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
使用Python对Access读写操作
2017/03/30 Python
Python subprocess库的使用详解
2018/10/26 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
python 制作网站小说下载器
2021/02/20 Python
pip install命令安装扩展库整理
2021/03/02 Python
比较基础的php面试题及答案-填空题
2014/04/26 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
消防先进事迹材料
2014/02/10 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技