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

时间: 2024-08-07 07:27:08

javascript学习心得(1)replace的相关文章

悟透JavaScript——学习心得

编程世界的两个基本元素:数据和代码. 数据天生文静,欲在保持:代码天生活泼,欲在改变. 面向对象的思想首次把数据和代码结合成统一体,并以一个简单的对象概念呈现给编程者. JavaScript中简单数据只有undefined.null.boolean.number和string五种,复杂数据只有object一种.代码只体现为function一种形式. 解析简单数据: undefined代表了一切未知的事物,啥也没有,无法想象,代码也就更无法处理了.注:typeof(undefined)返回值也是u

WGZX:javaScript 学习心得--2

转贴javascript心得(二) 标签: javascriptajaxweb开发htmlfirefox框架 2008-09-11 10:56 636人阅读 评论(0) 收藏 举报  分类: UI(21)  1,不要认为Struts已经过时了,也不要盲目的去追随JSF以及更新的MVC框架,在目前Struts仍旧 是最为优秀的MVC框架,尤其是后来与spring.hibernate(或者Ibatis)的结合,使得Struts的应用得到了进一步的发展,也许你 认为Webwork2.SpringMVC

WGZX:javaScript 学习心得--1

标签: javascriptiframedreamweaver浏览器htmltable 2008-09-11 10:50 1071人阅读 评论(0) 收藏 举报  分类: UI(21)  1,document.getElementById方法只能获取到一个对象,即使有多个同名的对象,也只取第 一个具有该名称的对象,例如在一个form(名称为myform)中,有三个id="mycheckbox"的复选框,那么使用 document.getElementById("mycheck

effective javascript 学习心得

第2条:理解JavaScript的浮点数 1.js数字只有一种类型 2.见代码 /** * Created by Administrator on 2017/7/2. */ console.log("charpter2"); console.log(1-0.41); //0.5900000000000001 double不能精确计算 console.log((8).toString(2));//1000 数字转其他进制输出 console.log(parseInt("1001

JavaScript 学习心得 基础

一.最基本一个js输出 1.js的书写环境: 1)内部插入js  格式:<script>js代码</script> 2) 外部js调用  格式:<script type="text/javascript" src="demo.js(后缀名为.js的文件路径)"></script> 2.输出向世界问好  例子:<script>document.write('hello world');</script&

javascript学习心得之字符串

1.charAt(index) 输出index位置的字符 var stringValue = "hello world";        alert(stringValue.charAt(1));//输出 e 2.charCodeAt(index) 输出index位置的字符对应的ASCII码 var stringValue = "hello world";        alert(stringValue.charCodeAt(1)); 3.concat(str)

JavaScript学习总结(十四)——JavaScript编写类的扩展方法

在?J?a?v?a?S?c?r?i?p?t?中?可以使?用?类的p?r?o?t?o?t?y?p?e属性来?扩?展?类的属?性?和?方?法,在实际开发当中,当JavaScript内置的那些类所提供的动态方法和动态属性不满足我们实际开发时,我们就可以通过"prototype"属性给自定义类添加方法和属性或者扩展原有的类中的方法和属性. 一.扩展JavaScript内置类,添加动态方法 语法格式: 类名.prototype.方法名 = function([param1],[param2],.

javascript学习

javascript 学习 title: Javascripttags: javascript,学习grammar_cjkRuby: true--- 定义变量 三种形式 var name; var name = "zhang san"; var name; name = "zhang san"; Javascript 的数据类型 6种数据类型 字符串单引号或双引号 var name = "zhang san"; var name = 'zhang

我的MYSQL学习心得(八)

我的MYSQL学习心得(八) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL学习心得(六) 我的MYSQL学习心得(七) 这一篇<我的MYSQL学习心得(七)>将会讲解MYSQL的插入.更新和删除语句 同样的,只会讲解跟SQLSERVER不同的地方 插入 将多行查询结果插入到表中 语法 INSERT INTO table_name1(column_list1) SELECT (