浅谈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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
Js apply方法详解
Feb 16 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
vue el-table实现行内编辑功能
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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php反射应用示例
2014/02/25 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
PyCharm设置护眼背景色的方法
2018/10/29 Python
python openpyxl使用方法详解
2019/07/18 Python
简单了解django文件下载方式
2020/02/10 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
工作时间上网检讨书
2014/02/03 职场文书
学期个人工作总结
2015/02/13 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书