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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
javaScript基础详解
Jan 19 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
详解js类型判断
May 22 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
a标签调用js的方法总结
Sep 05 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+mysql)
2007/11/23 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python中 * 的用法详解
2019/07/10 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
无刑事犯罪记录证明
2014/09/18 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
Python基础之Socket通信原理
2021/04/22 Python
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
php双向队列实例讲解
2021/11/17 PHP
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
yolov5返回坐标的方法实例
2022/03/17 Python