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,如需转载请自行联系原作者


相关文章
|
3天前
|
JavaScript 前端开发
js的一些内置函数
js的一些内置函数
7 1
|
3天前
|
JavaScript 前端开发 索引
js的includes函数
js的includes函数
9 1
|
3天前
|
JavaScript 安全 前端开发
js的map函数
js的map函数
7 0
|
3天前
|
JavaScript 前端开发
js的filter函数
js的filter函数
7 1
|
3天前
|
JavaScript 前端开发
js的函数
js的函数
5 0
|
3天前
|
JavaScript 前端开发
js的join函数
js的join函数
6 1
|
3天前
|
JavaScript 前端开发
js的check函数
js的check函数
8 1
|
3天前
|
JavaScript 前端开发 索引
js的some函数
js的some函数
8 1
|
3天前
|
开发框架 JavaScript .NET
Js字符串操作函数大全
Js字符串操作函数大全
8 1
|
7天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?