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

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

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

StringObject.replace(searchValue,replaceValue)

1.StringObject:字符串

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

3.replaceValue:字符串或者函数

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

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

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

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

若是第一个参数是正则表达式，就会替换全部子字符串。

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.一、使用$&字符给匹配字符加大括号

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

2.二、使用$`和$’字符替换内容

var str1 = 'A@B'.replace(/@/,"$`");	//AAB		匹配左侧
var str2 = 'A@B'.replace(/@/,"$'");	//ABB		匹配右侧

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

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

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

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

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

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

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

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

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

5、应用场景和示例

5.一、替换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.二、使用自定义函数将A-G字符串改成小写

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

5.三、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);

6、参考连接：

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

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

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