浅谈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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
vue mounted组件的使用
Jun 18 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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面向对象的三大特征
2017/06/10 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
详解redux异步操作实践
2018/08/15 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Python 的内置字符串方法小结
2016/03/15 Python
django初始化数据库的实例
2018/05/27 Python
python实现文本界面网络聊天室
2018/12/12 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
Python gevent协程切换实现详解
2020/09/14 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
公司董事长职责
2013/12/12 职场文书
一夜的工作教学反思
2014/02/08 职场文书
事业单位考核材料
2014/05/21 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
农行心得体会
2014/09/02 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python