JavaScript的String类型replace()方法介绍和使用replace()方法实现简单html模板替换功能...

2019独角兽企业重金招聘Python工程师标准>>>

JavaScript字符串的replace（）方法介绍

为了简化替换子字符串的操作，ECMAScript提供了replace（）方法。这个方法接收两个参数：第一个参数可以是一个字符串（这个字符串不会转换成正则表达式）或者是一个RegExp函数。如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，唯一的办法就是提供一个正则表达式，并且要指定全局（g）标志。replace()方法第二个参数也可以是一个函数。

StringObject.replace(searchValue,replaceValue)

1.StringObject:字符串

2.searchValue：字符串或正则表达式

3.replaceValue:字符串或者函数

一、第一个参数传入字符串和第二个参数传入字符串的方式：

如果第一个参数是字符串，只会替换第一个子字符串。

var text = 'cat,bat,sat,fat';
var result = text.replace('at','ond');
alert(result);	//cond,bat,sat,fat

var newStr =  'I am loser,You are loser'.replace('loser','hero');
alert(newStr);//I am hero,You are loser 

二、第一个参数传入正则表达式和第二个参数传入字符串的方式

如果第一个参数是正则表达式，就会替换所有子字符串。

var text = 'cat,bat,sat,fat';
var result = text.replace(/at/g,'ond');
alert(result);	//cond,bond,sond,fond

var newStr =  'I am loser,You are loser'.replace(/loser/g,'hero');
alert(newStr);//I am hero,You are hero

如果第二个参数是字符串的话，还可以用特殊的字符序列，将这则表达式操作得到的值插入结果字符串中。（如果字符串中有几个特定字符的话，会被转换为特定字符串）。

字符序列	替换文本
$$	$
$&	匹配整个模式的子字符串
$`	匹配子字符串之前的子字符串
$'	匹配子字符串之后的子字符串
$n	匹配第n个捕获组的子字符串，（n = 0~9）。如：$1匹配第一个捕获的子字符串，$2是匹配第二个捕获的子字符串。以此类推
$nn	匹配第n个捕获组的子字符串，（n = 01~99）。如：$01匹配第一个捕获的子字符串，$02是匹配第二个捕获的子字符串。以此类推

2.1、使用$&字符给匹配字符加大括号

var oldStr='讨论一下正则表达式中的replace的用法'; 
var newStr = oldStr.replace(/正则表达式/,'{$&}');
alert(newStr);//讨论一下{正则表达式}中的replace的用法

2.2、使用$`和$’字符替换内容

var str1 = '[email protected]'.replace(/@/,"$`");	//AAB		匹配左侧
var str2 = '[email protected]'.replace(/@/,"$'");	//ABB		匹配右侧

2.3、使用分组匹配组合新的字符串（$n $nn）

var str1 = '[email protected]'.replace(/(.+)(@)(.*)/,"$2$1");
alert(str1);//@haiandao1
var str2 = '[email protected]'.replace(/(.+)(@)(.*)/,"$3$2$1");
console.log(str2);//[email protected]

三、第一个参数传入字符串和第二个参数传入函数的方式

第二个参数传入函数的方式，在只有一个模式匹配项（与模式匹配的字符串）的情况下，会向这个函数传递三个参数：模式的匹配项、模式的匹配项在字符串中的位置和原始字符串。

var text = 'cat,bat,sat,fat';
var result = text.replace('at',function( match , pos ,orginalText ){
    /*	for (var i = 0; i < arguments.length; i++) {
		console.log(arguments[i]);
	}*/
	console.log(match);	//at
	console.log(pos);	//1
	console.log(orginalText);	//cat,bat,sat,fat
	return 'ond';		//返回值为需要替换的新值
});
alert(result);	//cond,bat,sat,fat

四、第一个参数传入字正则表达式和第二个参数传入函数的方式

第二个参数传入函数的方式，在正则表达式定义了多个捕获组的情况下，传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项……，最后两个参数依然分别是模式的匹配项在字符串中的位置和原始字符串。

var text = '[email protected]';
var result = text.replace(/(.+)(@)(.*)/,function( match , pos ,orginalText ){
	for (var i = 0; i < arguments.length; i++) {
		//[email protected] ：模式的匹配项
		//haiandao1 ：第1个捕获组的匹配项
		//@ ：第2个捕获组的匹配项
		//163.com ：第3个捕获组的匹配项
		//0 ：模式的匹配项在字符串中的位置
		//[email protected] ：原始字符串
		console.log(arguments[i]);
	}
	 return '返回值会替换掉匹配到的目标';
});
alert(result);	//返回值会替换掉匹配到的目标

var text = '[email protected]';
var result = text.replace(/(@)(.*)/,function( match , pos ,orginalText ){
	for (var i = 0; i < arguments.length; i++) {
		//@163.com ：模式的匹配项
		//@ ：第1个捕获组的匹配项
		//163.com ：第2个捕获组的匹配项
		//9 ：模式的匹配项在字符串中的位置
		//[email protected] ：原始字符串
		console.log(arguments[i]);
	}
	 return '返回值会替换掉匹配到的目标';
});
alert(result);	//haiandao1返回值会替换掉匹配到的目标

五、应用场景和示例

5.1、替换html标签

function htmlEscape( text ){
	return text.replace(/[<>"&]/g,function(match,pos,orginalText){
		switch (match){
			case '<':
				return '小于';
			case '>':
				return '大于';
			case '&':
				return '&amp';
			case '\"':
				return '双引号';
		}
	})
}
//小于p class=双引号greeting双引号大于helloWorld小于/p大于
console.log( htmlEscape('<p class="greeting">helloWorld</p>') );

5.2、使用自定义函数将A-G字符串改为小写

'JAVASCRIPT'.replace(/[A-G]/g,function(){ 
    return arguments[0].toLowerCase(); 
})//JaVaScRIPT 

5.3、Simple JavaScript Template 简单的JavaScript渲染模板

function substitute (str, obj) {
    if (!(Object.prototype.toString.call(str) === '[object String]')) {
        return '';
    }
    if(!(Object.prototype.toString.call(obj) === '[object Object]' && 'isPrototypeOf' in obj)) {
        return str;
    }
    return str.replace(/\{([^{}]+)\}/g, function(match, key) {
        var value = obj[key];
        return ( value !== undefined) ? '' + value : '';
    });
}

var obj = {
    url: '我是超链接',
    title: '我是标题',
    text: '我是文本'
};
var link = '<a href="{url}" title="{title}">{text}</a>';
substitute(link, obj);

六、参考链接：

1、JavaScript高级程序设计第三版

2、http://developer.51cto.com/art/201311/415725.htm

3、http://www.planabc.net/2011/05/31/simple_javascript_template_substitute/

转载于:https://my.oschina.net/tianshuo/blog/744699