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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
vue mint-ui tabbar变组件使用
May 04 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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索引问题
2008/06/07 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
迁户口计划生育证明
2014/10/19 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技