JavaScript 函数replace深入了解


Posted in Javascript onMarch 14, 2013

replace函数接受两个参数,第一个参数为字符串或正则表达式,第一个参数同样可以接受一个字符串,还可能是一个函数。

      首先对于第一个参数为字符串的我们不再需要多说"I am a boy".replace("boy","girl"),输出:"I am a girl"。在这里想说的是第一个参数为正则的情形。对于正则表达式来说首先会根据是否全局的(全局//g)决定替换行为,如果是全部的则替换全部替换,非全局的只有替换首个匹配的字符串。例如:

"Ha Ha".replace(/\b\w+\b/g, "He")  // He He "Ha Ha".replace(/\b\w+\b/, "He")  //He Ha

1:第二个参数为字符串:

    对于正则replace约定了一个特殊标记符$:

1.$i (i:1-99) : 表示从左到右正则子表达式所匹配的文本。
2.$&:表示与正则表达式匹配的全文本。
3.$`(`:切换技能键):表示匹配字符串的左边文本。
4.$'(‘:单引号):表示匹配字符串的右边文本。
5.$$:表示$转移。
下面来几个demo:

"boy & girl".replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1") //girl & boy "boy".replace(/\w+/g,"$&-$&") // boy-boy 
"javascript".replace(/script/,"$& != $`") //javascript != java 
"javascript".replace(/java/,"$&$' is ") // javascript is script

2:第二个参数为函数:

      在ECMAScript3推荐使用函数方式,实现于JavaScript1.2.当replace方法执行的时候每次都会调用该函数,返回值作为替换的新值。

     函数参数的规定:

1.第一个参数为每次匹配的全文本($&)。
2.中间参数为子表达式匹配字符串,个数不限.( $i (i:1-99))
3.倒数第二个参数为匹配文本字符串的匹配下标位置。
4.最后一个参数表示字符串本身。
这就是本文所要说replace威力强大的地方,理论的东西都是干货,我们需要示例解决一切空洞的问题:

1:字符串首字母大写:

String.prototype.capitalize = function(){     return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); 
    } ); 
}; 
console.log("i am a boy !".capitalize())

输出:I Am A Boy !

2:对字符串“张三56分, 李四74分, 王五92分, 赵六84分”的分数提取汇总,算出平均分并输出每个人的平均分差距。

var s = "张三56分, 李四74分, 王五92分, 赵六84分"; var a = s.match(/\d+/g); 
var sum = 0; 
for(var i = 0 ; i < a.length; i++){ 
            sum += parseFloat(a[i]); 
} 
   
var avg = sum / a.length; 
   
function f(){ 
            var n = parseFloat(arguments[1]); 
            return n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) : 
                        ("低于平均分" + (avg - n))) + "分)"; 
} 
   
var result = s.replace(/(\d+)分/g, f); 
console.log(result);

输出:

张三56分(低于平均分20.5分), 李四74分(低于平均分2.5分), 王五92分(超出平均分15.5分), 赵六84分(超出平均分7.5分)

       JavaScript的replace函数再加上正则的高级应用,JavaScript的replace将会发回更大的威力所在,在这里将不再深入正则高级应用断言之类的。

出处:http://www.cnblogs.com/whitewolf/

Javascript 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
jquery实现显示已选用户
Jul 21 Javascript
轮播图组件js代码
Aug 08 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
JavaScript实现简单拖拽效果
Sep 15 Javascript
JS异常处理的一个想法(sofish)
Mar 14 #Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 #Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
document.createElement()用法
Mar 13 #Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 #Javascript
九种js弹出对话框的方法总结
Mar 12 #Javascript
You might like
使用PHP获取网络文件的实现代码
2010/01/01 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python制作最美应用的爬虫
2015/10/28 Python
Python过滤列表用法实例分析
2016/04/29 Python
python print出共轭复数的方法详解
2019/06/25 Python
python模块常用用法实例详解
2019/10/17 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python scatter函数用法实例详解
2020/02/11 Python
C,C++的几个面试题小集
2013/07/13 面试题
最受欢迎的自我评价
2013/12/22 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
爱情保证书
2015/01/17 职场文书
大雁塔导游词
2015/02/04 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫