浅谈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变量函数浅析
Sep 02 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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
德劲1107的电路分析与打磨
2021/03/02 无线电
建立文件交换功能的脚本(一)
2006/10/09 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
webpack之devtool详解
2018/02/10 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python作用域用法实例详解
2016/03/15 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
pandas如何处理缺失值
2019/07/31 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
django ORM之values和annotate使用详解
2020/05/19 Python
专业毕业生个性的自我评价
2013/10/03 职场文书
会计岗位职责
2013/11/08 职场文书
中学门卫岗位职责
2013/12/26 职场文书
大学军训感言200字
2014/02/26 职场文书
益达广告词
2014/03/14 职场文书
学生打架检讨书
2014/10/20 职场文书
2015年化验室工作总结
2015/04/23 职场文书
学校节水倡议书
2015/04/29 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书