浅谈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 相关文章推荐
js控制淡入淡出示例代码
Nov 12 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
费用会计岗位职责
2014/01/01 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
个人工作表现评价材料
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
老员工辞职信范文
2015/05/12 职场文书
宝宝满月祝酒词
2015/08/10 职场文书