浅谈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 相关文章推荐
javascript中的prototype属性实例分析说明
Aug 09 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
基于Angularjs实现分页功能
May 30 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
小试SVG之新手小白入门教程
Jan 08 Javascript
JS查找孩子节点简单示例
Jul 25 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 MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
用js重建星际争霸
2006/12/22 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
简单的Vue SSR的示例代码
2018/01/12 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
经贸日语专业个人求职信范文
2014/04/29 职场文书
小学捐书活动总结
2014/07/05 职场文书
2014年质检工作总结
2014/11/26 职场文书
教师个人自我评价
2015/03/04 职场文书
商场营业员岗位职责
2015/04/14 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
Python自然语言处理之切分算法详解
2021/04/25 Python
详解Python类和对象内容
2021/06/22 Python
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis