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：&lt;br&gt;内容文字一&lt;p&gt;内容文字二&lt;/p&gt;
// decodeHtml：<br>内容文字一<p>内容文字二</p>

二、用正则表达式进行转换

编码原理就是把对应的<、>、空格符、&、'、"替换成html编码。

解码原理就是把html编码替换成对应的字符。

实现：

var HtmlUtil = {
	// 省略上次代码...
	
	// 3.使用正则实现html编码
	htmlEncodeByRegExp: function(str) {
		var s = '';
		if(str.length === 0) {
			return '';
		}
		s = str.replace(/&/g,'&amp;');
		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：&lt;br&gt;内容文字一&lt;p&gt;内容文字二&lt;/p&gt;
// 正则表达式解码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,'&amp;');
		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;
	}
}