JavaScript 函数replace揭秘

简介:

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

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

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

     函数参数的规定:

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


作者:破  狼 
出处:http://www.cnblogs.com/whitewolf/ 
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客博客园--破狼51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2013/03/14/2958720.html


相关文章
|
16天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
16天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
10 0
|
16天前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
9 0
|
27天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
17 1
|
1月前
|
前端开发 JavaScript 数据处理
在JavaScript中,什么是异步函数执行的例子
在JavaScript中,什么是异步函数执行的例子
10 0
|
1月前
|
JavaScript
JS封装节流函数
JS封装节流函数
15 0
|
1月前
|
JavaScript 前端开发
javascript箭头函数
javascript箭头函数
|
1月前
|
JavaScript 小程序
微信小程序 wxml 中使用 js函数
微信小程序 wxml 中使用 js函数
67 0
|
1月前
|
JavaScript 前端开发
JavaScript函数科里化
JavaScript函数科里化