开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript 函数replace揭秘

简介:
+关注继续查看

        JavaScriptreplace函数作字符串替函数,是一个威力大的字符串操作函数,于常字符串操作的推荐用法。篇随笔就来更加深入的理解它。

       replace函数接受两个参数,第一个参数字符串或正表达式,第一个参数同可以接受一个字符串,可能是一个函数。

      首先对于第一个参数为字符串的我们不再需要多说"I am a boy".replace("boy","girl"),输出:"I am a girl"。在这里想说的是第一个参数为正则的情形。对于正则表达式来说首先会根据是否全局的(全局//g)决定替换行为,如果是全部的则替换全部替换,非全局的只有替换首个匹配的字符串。例如:

 


  1. "Ha Ha".replace(/\b\w+\b/g, "He")  // He He 
  2.  
  3. "Ha Ha".replace(/\b\w+\b/, "He")  //He Ha 

1:第二个参数为字符串:

    对于正则replace约定了一个特殊标记符$

1.     $i (i:1-99) : 表示从左到右正则子表达式所匹配的文本。

2.     $&:表示与正则表达式匹配的全文本。

3.     $`(`:切换技能键):表示匹配字符串的左边文本。

4.     $’(‘:单引号):表示匹配字符串的右边文本。

5.     $$:表示$转移。

下面来几个demo:


  1. "boy & girl".replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1"//girl & boy 
  2.  
  3. "boy".replace(/\w+/g,"$&-$&"// boy-boy 
  4.  
  5. "javascript".replace(/script/,"$& != $`"//javascript != java 
  6.  
  7. "javascript".replace(/java/,"$&$' is "// javascript is script 

2:第二个参数为函数:

      ECMAScript3推荐使用函数方式,实现于JavaScript1.2.replace方法执行的时候每次都会调用该函数,返回值作为替换的新值。

     函数参数的规定:

1.     第一个参数为每次匹配的全文本($&)。

2.     中间参数为子表达式匹配字符串,个数不限.( $i (i:1-99))

3.     倒数第二个参数为匹配文本字符串的匹配下标位置。

4.     最后一个参数表示字符串本身。

这就是本文所要说replace威力强大的地方,理论的东西都是干货,我们需要示例解决一切空洞的问题:

1:字符串首字母大写:


  1. String.prototype.capitalize = function(){ 
  2.  
  3.     return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); 
  4.  
  5.     } ); 
  6.  
  7. }; 
  8.  
  9.   
  10.  
  11. console.log("i am a boy !".capitalize()) 

输出:I Am A Boy !

2:对字符串“张三56分, 李四74分, 王五92分, 赵六84分”的分数提取汇总,算出平均分并输出每个人的平均分差距。


  1. var s = "张三56分, 李四74分, 王五92分, 赵六84分"
  2.  
  3. var a = s.match(/\d+/g); 
  4.  
  5. var sum = 0; 
  6.  
  7. for(var i = 0 ; i < a.length; i++){ 
  8.  
  9.             sum += parseFloat(a[i]); 
  10.  
  11.  
  12.   
  13.  
  14. var avg = sum / a.length; 
  15.  
  16.   
  17.  
  18. function f(){ 
  19.  
  20.             var n = parseFloat(arguments[1]); 
  21.  
  22.             return n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) : 
  23.  
  24.                         ("低于平均分" + (avg - n))) + "分)"
  25.  
  26.  
  27.   
  28.  
  29. var result = s.replace(/(\d+)分/g, f); 
  30.  
  31. console.log(result); 
  32.  
  33.   

输出:

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

 

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


 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/1153874,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript函数篇之ES6箭头函数与匿名函数
对于箭头函数,this 关键字始终表示定义箭头函数的对象。
0 0
JavaScript学习笔记(一),js变量、以及函数的调用
JavaScript学习笔记(一),js变量、以及函数的调用
0 0
重温js——函数基础
函数的作用,减少重复代码,实现代码的解耦。把某个功能点给抽离出来。使得代码阅读增加
0 0
JavaScript的函数(二)
JavaScript的函数之自执行函数和闭包 前面讲到js函数的基本分类及使用,今天我们来聊一下自执行函数的原理以及简单闭包原理。 1.自执行函数 说到自执行函数,其实就是函数不用被调用,自身执行代码块代码。整体思路如下代码: 1.按照我们的想法,先声明一个匿名函数,然后在函数后面加上(),但是会发现报错。如下图: 在这里插入图片描述 按照上面的思路去理解,在匿名函数后面直接加上()应该是可以立即执行的,但这个函数报错了,而且报了两个错误,是因为浏览器在解析js代码的时候,遇到function会当做函数声明,然后检查语法,函数声明必须要有函数名,所以报错;第二个括号处的语法错误在于函数
0 0
JavaScript的函数解析(一)
JavaScript的函数 今天和大家说一下js中一个比较重要的内容,函数。 JavaScript 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 JavaScript 函数是被设计为执行特定任务的代码块。 JavaScript 函数会在某代码调用它时被执行。 JavaScript 函数由 function 声明。 JavaScript 函数声明后需要被调用才会执行。 1.无参函数 // 声明函数 function func1(){ console.log("这是一个无参函数"); }
0 0
JavaScript组合函数
JavaScript组合函数
0 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
0 0
【JavaScript】函数式编程——函数柯里化
【JavaScript】函数式编程——函数柯里化
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
JavaScript函数
立即下载
JS零基础入门教程(上册)
立即下载