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


相关文章
|
2天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
9 0
|
2天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
8 1
|
2天前
|
JavaScript 前端开发 网络架构
JavaScript中的箭头函数是一种新的函数表达形式
【5月更文挑战第9天】JavaScript的箭头函数以简洁语法简化函数定义,其特性包括:1) 不绑定自身this,继承上下文的this,适合回调和事件处理;2) 没有arguments对象,需用剩余参数语法访问参数;3) 不能用作构造函数,无new调用;4) 没有prototype属性,不支持基于原型的继承。箭头函数在特定场景下优化了this处理,但使用时要注意与普通函数的差异。
6 2
|
5天前
|
JavaScript 前端开发
js的一些内置函数
js的一些内置函数
7 1
|
5天前
|
JavaScript 前端开发 索引
js的includes函数
js的includes函数
10 1
|
5天前
|
JavaScript 安全 前端开发
js的map函数
js的map函数
7 0
|
5天前
|
JavaScript 前端开发
js的filter函数
js的filter函数
8 1
|
5天前
|
JavaScript 前端开发
js的函数
js的函数
7 0
|
5天前
|
JavaScript 前端开发
js的join函数
js的join函数
8 1
|
5天前
|
JavaScript 前端开发
js的check函数
js的check函数
9 1