首页 > PHP资讯 > HTML5培训技术 > javascript:replace()方法使用详解

javascript:replace()方法使用详解

HTML5培训技术

一、基本语法:
replace(regexp|substr, newSubStr|function[, flags]);
二、参数介绍:
1)参数一:
a)regexp:一个 RegExp 对象.该正则所匹配的内容会被第二个参数的返回值替换掉.
b)substr:被替换掉的一个 String.
2)参数二:
a)newSubStr:替换掉第一个参数在原字符串中的匹配部分.该字符串中可以内插一些特殊的变量名. 比如$$、$`、$'、$&、$1...99 etc.
特殊变量名解释如下:
$$:表示字符串 "$".
$&:表示第一个参数所匹配的子串
$`:位于匹配子串$&左边的内容.
$':位于匹配子串$&右边的内容.
$n or $nn :如果n或nn是个十进制的数字,并且replace方法的第一个参数是个正则表达式,那么$n表示正则表达式中的第n个子匹配字符串.


b)function(str,$1[,$2,...,$99],offset,s):创建新的子串,参数解释如下
str:匹配的子串
$1...99:第n个括号子匹配字符串,提供替换的第一个参数是一个正则表达式对象。(对应于$1、$2等。)
offset:匹配子串在字符串中的开始位置(从0开始),例如"abcd",正则/bc/,offset = 1.
s:当前操作的字符串
3)参数三(可选):
flags:指定正则表达式的匹配模式,可选值:
g:全局替换
i:忽略大小写
m:多行替换
y:?
三、实战
1)字符串倒置

var name = "Hello Benjamin";console.log(name.replace(/(w+)(s+)(w+)/g,"$3$2$1"));//Benjamin Hello

2)一般式转换为驼峰式

var name = "border-top-width";//这里不加g只会匹配一次console.log(	name.replace(/-(w)/g,function(str,$1){		return $1.toUpperCase();	}));//borderTopWidth

3)驼峰式转换为一般式

var name = "borderTopWidth";console.log(name.replace(/[A-Z]/g,"$&".toLowerCase()));//borderTopWidth,不能正确转换!是因为"$&".toLowerCase()先进行的转换为小写,还是"$&",因此么有变化。//看下面的例子可以发现console.log(name.replace(/[A-Z]/g,"XX$&YY".toLowerCase()));//borderxxTyyopxxWyyidth,先执行"XX$&YY".toLowerCase()转换为小写,然后再进行正则替换。console.log(	name.replace(/[A-Z]/g,function(match){		return "-" + match.toLowerCase();	}));

4)华氏温度转为摄氏温度

function F2C(str){	//b匹配一个单词的边界	return String(str).replace(		/(d+(.d*)?)Fb/g,		function(str,$1,$2,offset,s){			return ($1 - 32)/1.8 + "C";		}	);}console.log(F2C("21.2F"));//-6°C

5)常用字符串替换

var name = "Hello Benjamin";console.log(name.replace("Hello","Welcome to"));//Welcome to Benjamin

6)使用flags

var name = "Welcome to Benjamin website,my url is http://blog.csdn.net/cuew1987 of Benjamin——
工程师"console.log(name.replace("Benjamin", "Ben", "gi")); //全局替换,忽略大小写,Welcome to Ben website,my url is http://blog.csdn.net/cuew1987 of Ben——前端开发工程师

转载请尊重原创,注明出处Benjamin——前端攻城师,本页地址http://blog.csdn.net/cuew1987/article/details/17528653,谢谢!



HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持25不支持0