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/