浅谈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实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
JS实现京东商品分类侧边栏
Dec 11 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
基于php冒泡排序算法的深入理解
2013/06/09 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
javascript实现摄像头拍照预览
2019/09/30 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python中的数据结构比较
2019/05/13 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
有关打架的检讨书
2014/01/25 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
建筑工地文明标语
2014/10/09 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技