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 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
js控制input框只读实现示例
Jan 20 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
HTML+JS实现在线朗读器
Feb 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
新手简单了解vue
2019/05/29 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
安全生产网格化管理实施方案
2014/03/01 职场文书
年终晚会活动方案
2014/08/21 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python