浅谈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中的细节分析
Jun 30 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JS input 数字验证代码
2009/07/30 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python中return的返回和执行实例
2019/12/24 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
我爱读书演讲稿
2014/05/07 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
企业安全生产检查制度
2015/08/06 职场文书
电工实训心得体会
2016/01/14 职场文书