浅谈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 版元素拖拽原型代码
Apr 25 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
如何提高javascript加载速度
Dec 26 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
javaScript中的空值和假值
Dec 18 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 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
thinkphp中的url跳转用法分析
2016/07/12 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
jQuery实现验证用户登录
2019/12/10 jQuery
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
python简单实现旋转图片的方法
2015/05/30 Python
zookeeper python接口实例详解
2018/01/18 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
HTTP状态码详解
2021/03/18 杂记
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
介绍一下Java中的static关键字
2012/05/12 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
教师实习期自我鉴定
2013/10/06 职场文书
《影子》教学反思
2014/02/21 职场文书
《三峡》教学反思
2014/03/01 职场文书
数字化校园建设方案
2014/05/03 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers