JS處理html的編碼(encode)與解碼(decode)

一、用瀏覽器內部轉換器實現轉換

代碼：

var HtmlUtil = {
	// 1.用瀏覽器內部轉換器實現html編碼
	htmlEncode: function(html) {
		// 創建一個元素容器
		var tempDiv = document.createElement('div');
		// 把需要編碼的字符串賦值給該元素的innerText(ie支持)或者textContent(火狐、谷歌等) 
		(tempDiv.textContent != undefined) ? (tempDiv.textContent = html) : (tempDiv.innerText = html);
		var output = tempDiv.innerHTML;
		tempDiv = null;
		return output;
	},
	
	// 2.用瀏覽器內部轉換器實現html解碼
	htmlDecode: function(text) {
		// 創建一個元素容器
		var tempDiv = document.createElement('div');
		// 把解碼字符串賦值給元素innerHTML
		tempDiv.innerHTML = text;
		// 最后返回這個元素的innerText(ie支持)或者textContent(火狐、谷歌等支持)
		var output = tempDiv.innerText || tempDiv.textContent;
		tempDiv = null;
		return output;
	}
}

測試：

var html = "<br>內容文字一<p>內容文字二</p>";
var encodeHtml = HtmlUtil.htmlEncode(html);
console.log("encodeHtml：" + encodeHtml); 
var decodeHtml = HtmlUtil.htmlDecode(encodeHtml);
console.log("decodeHtml：" + decodeHtml);

結果：

// encodeHtml：<br>內容文字一<p>內容文字二</p>
// decodeHtml：<br>內容文字一<p>內容文字二</p>

二、用正則表達式進行轉換

編碼原理就是把對應的<、>、空格符、&、'、"替換成html編碼。

解碼原理就是把html編碼替換成對應的字符。

實現：

var HtmlUtil = {
	// 省略上次代碼...
	
	// 3.使用正則實現html編碼
	htmlEncodeByRegExp: function(str) {
		var s = '';
		if(str.length === 0) {
			return '';
		}
		s = str.replace(/&/g,'&');
		s = s.replace(/</g,'&lt;');
		s = s.replace(/>/g,'&gt;');
		s = s.replace(/ /g,'&nbsp;');
		s = s.replace(/\'/g,'&#39;');
		s= s.replace(/\"/g,'&quot;');
		return s;
	},
	
	// 4.使用正則實現html解碼
	htmlDecodeByRegExp: function(str) {
		var s = '';
		if(str.length === 0) {
			return '';
		}
		s = str.replace(/&amp;/g, '&');
		s = s.replace(/&lt;/g,'<');
		s = s.replace(/&gt;/g,'>');
		s = s.replace(/&nbsp;/g,' ');
		s = s.replace(/&#39;/g,'\'');
		s = s.replace(/&quot;/g,'\"');
		return s;
	}
}

測試：

var html = "<br>內容文字一<p>內容文字二</p>";
var encodeHtml = HtmlUtil.htmlEncodeByRegExp(html);
console.log("正則表達式編碼html：" + encodeHtml); 
var decodeHtml = HtmlUtil.htmlDecodeByRegExp(encodeHtml);
console.log("正則表達式解碼html：" + decodeHtml);

結果：

// 正則表達式編碼html：<br>內容文字一<p>內容文字二</p>
// 正則表達式解碼html：<br>內容文字一<p>內容文字二</p>

三、完整HtmlUtil工具類

var HtmlUtil = {
	// 1.用瀏覽器內部轉換器實現html編碼
	htmlEncode: function(html) {
		// 創建一個元素容器
		var tempDiv = document.createElement('div');
		// 把需要編碼的字符串賦值給該元素的innerText(ie支持)或者textContent(火狐、谷歌等) 
		(tempDiv.textContent != undefined) ? (tempDiv.textContent = html) : (tempDiv.innerText = html);
		var output = tempDiv.innerHTML;
		tempDiv = null;
		return output;
	},
	
	// 2.用瀏覽器內部轉換器實現html解碼
	htmlDecode: function(text) {
		// 創建一個元素容器
		var tempDiv = document.createElement('div');
		// 把解碼字符串賦值給元素innerHTML
		tempDiv.innerHTML = text;
		// 最后返回這個元素的innerText(ie支持)或者textContent(火狐、谷歌等支持)
		var output = tempDiv.innerText || tempDiv.textContent;
		tempDiv = null;
		return output;
	},
	// 3.使用正則實現html編碼
	htmlEncodeByRegExp: function(str) {
		var s = '';
		if(str.length === 0) {
			return '';
		}
		s = str.replace(/&/g,'&');
		s = s.replace(/</g,'&lt;');
		s = s.replace(/>/g,'&gt;');
		s = s.replace(/ /g,'&nbsp;');
		s = s.replace(/\'/g,'&#39;');
		s= s.replace(/\"/g,'&quot;');
		return s;
	},
	
	// 4.使用正則實現html解碼
	htmlDecodeByRegExp: function(str) {
		var s = '';
		if(str.length === 0) {
			return '';
		}
		s = str.replace(/&amp;/g, '&');
		s = s.replace(/&lt;/g,'<');
		s = s.replace(/&gt;/g,'>');
		s = s.replace(/&nbsp;/g,' ');
		s = s.replace(/&#39;/g,'\'');
		s = s.replace(/&quot;/g,'\"');
		return s;
	}
}

參考地址：https://www.cnblogs.com/xdp-gacl/p/3722642.html