浅谈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 相关文章推荐
Expandable "Detail" Table Rows
Aug 29 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
Vue实现选择城市功能
May 27 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue实例中data使用return包裹的方法
Aug 27 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
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中mt_rand()随机数函数用法
2014/11/24 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
JavaScript中this详解
2015/09/01 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
javascript中join方法实例讲解
2019/02/21 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python socket处理client连接过程解析
2020/03/18 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
土木工程专业自荐信
2013/10/04 职场文书
车间班组长的职责
2013/12/13 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
文明村镇申报材料
2014/05/06 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
局火灾防控工作方案
2014/05/25 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
预备党员入党感想
2015/08/10 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL