一、用浏览器内部转换器实现转换
代码:
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,'<');
s = s.replace(/>/g,'>');
s = s.replace(/ /g,' ');
s = s.replace(/\'/g,''');
s= s.replace(/\"/g,'"');
return s;
},
// 4.使用正则实现html解码
htmlDecodeByRegExp: function(str) {
var s = '';
if(str.length === 0) {
return '';
}
s = str.replace(/&/g, '&');
s = s.replace(/</g,'<');
s = s.replace(/>/g,'>');
s = s.replace(/ /g,' ');
s = s.replace(/'/g,'\'');
s = s.replace(/"/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,'<');
s = s.replace(/>/g,'>');
s = s.replace(/ /g,' ');
s = s.replace(/\'/g,''');
s= s.replace(/\"/g,'"');
return s;
},
// 4.使用正则实现html解码
htmlDecodeByRegExp: function(str) {
var s = '';
if(str.length === 0) {
return '';
}
s = str.replace(/&/g, '&');
s = s.replace(/</g,'<');
s = s.replace(/>/g,'>');
s = s.replace(/ /g,' ');
s = s.replace(/'/g,'\'');
s = s.replace(/"/g,'\"');
return s;
}
}
参考地址:https://www.cnblogs.com/xdp-gacl/p/3722642.html