JavaScript 函数replace揭秘

2019独角兽企业重金招聘Python工程师标准>>>

在JavaScript中replace函数作为字符串替换函数，这是一个威力强大的字符串操作函数，对于常见字符串操作的推荐用法。这篇随笔就来更加深入的理解它。

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约定了一个特殊标记符$：

$i (i:1-99) : 表示从左到右正则子表达式所匹配的文本。
$&:表示与正则表达式匹配的全文本。
$`(`:切换技能键)：表示匹配字符串的左边文本。
$’(‘:单引号)：表示匹配字符串的右边文本。
$$：表示$转移。

下面来几个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方法执行的时候每次都会调用该函数，返回值作为替换的新值。

函数参数的规定：

第一个参数为每次匹配的全文本（$&）。
中间参数为子表达式匹配字符串，个数不限.( $i (i:1-99))
倒数第二个参数为匹配文本字符串的匹配下标位置。
最后一个参数表示字符串本身。

这就是本文所要说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 avg = a.reduce(function(obj, item){ return obj + parseFloat(item);},0) / a.length;
var result = s.replace(/(\d+)分/g, function(){var n = parseFloat(arguments[1]);return n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) :("低于平均分" + (avg - n))) + "分)";});
console.log(result);

输出：

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

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

转载于:https://my.oschina.net/u/1260221/blog/715901

JavaScript 函数replace揭秘相关推荐

javascript中replace使用方法总结
这篇文章主要为大家详细介绍了javascript中replace的使用方法,使用replace和正则表达式共同实现字符串trim方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ECMAScri ...
JavaScript的replace方法与正则表达式结合应用讲解
大家好!!今晚在华软G43*宿舍没什么事做,把javascript中replace方法讲解一下,如果讲得不对或不合理是情理之中的事,因为我不是老鸟,也不是菜鸟,我也不知道我当底是什么鸟??呵~~ re ...
JavaScript 函数的定义
一.关于函数 JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句. 比如我们有一个特定的功能需要三条语句实现那么每次想实现这个功能的时 ...
[转]WEB开发者必备的7个JavaScript函数
我记得数年前,只要我们编写JavaScript,都必须用到几个常用的函数,比如,addEventListener 和 attachEvent,并不是为了很超前的技术和功能,只是一些基本的任务,原因是各 ...
一些常用且实用的原生 JavaScript函数[转]
日常开始中常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用,会常更新,同时也欢迎大家补充. css及html方面的技巧总结,点此前往: 前端开发中一些 ...
常用JavaScript函数 31 - 46（自我总结）
常用JavaScript函数 1 - 15 (自我总结) 常用JavaScript函数 16 - 30(自我总结) 31.获得当前日期 32. jquery 操作 radio 33. 双击滚屏 34. ...
常用JavaScript函数 16 - 30（自我总结）
常用JavaScript函数 1 - 15 (自我总结) 常用JavaScript函数 31- 46 (自我总结) 16. 除去数组重复项 17. 操作cookie 18. 判断浏览器类型 19. 判 ...
常用JavaScript函数 1 - 15 （自我总结）
常用JavaScript函数 16 - 30(自我总结) 常用JavaScript函数 31- 46 (自我总结) 1. 调整图片大小,不走形(FF IE 兼容)/ 剪切图片(overflow:hi ...
浅谈javascript函数劫持
创建时间:2007-12-02 文章属性:原创文章提交:hkluoluo (luoluonet_at_hotmail.com) by luoluo on 2007-11-30 luoluonet_a ...

JavaScript 函数replace揭秘

JavaScript 函数replace揭秘相关推荐

最新文章

热门文章