FED实验室 - 专注WEB端开发和用户体验

javascript:replace()方法使用详解

JAVASCRIPT 煦涵 2722℃ 0评论

一、基本语法

replace(regexp|substr, newSubStr|function[, flags]);

二、参数介绍:

参数一:

a)regexp:一个 RegExp 对象.该正则所匹配的内容会被第二个参数的返回值替换掉.
b)substr:被替换掉的一个 String.

参数二:

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:当前操作的字符串

参数三(可选):

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*)?)F\b/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——前端开发工程师

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (2)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址