首页 > web前端 > js教程 > 正文

JavaScript 函数replace揭秘

高洛峰
发布: 2016-11-28 15:58:43
原创
1446人浏览过

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 

 

秘塔写作猫
秘塔写作猫

秘塔写作猫是一个集AI写作、校对、润色、配图等为一体的创作平台

秘塔写作猫 29
查看详情 秘塔写作猫

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

1:第二个参数为字符串:
    对于正则replace约定了一个特殊标记符$:
1.     $i (i:1-99) : 表示从左到右正则子表达式所匹配的文本。
2.     $&:表示与正则表达式匹配的全文本。
3.     $`(`:切换技能键):表示匹配字符串的左边文本。
4.     $’(‘:单引号):表示匹配字符串的右边文本。
5.     $$:表示$转移。
下面来几个demo:

立即学习Java免费学习笔记(深入)”;

"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将会发回更大的威力所在,在这里将不再深入正则高级应用断言之类的。

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号