zoukankan      html  css  js  c++  java
  • 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;
    	}
    }
    

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

  • 相关阅读:
    css选择器中的*= , |= , ^= , $= , ~= 的区别
    css 实现小三角
    使用vitevue3ts快速上手做一个todolist
    什么是回流和重绘?
    vue好用组件推荐
    Vue代码风格及规范
    聊聊 SpringBoot 中的两种占位符:@*@ 和 ${*}
    Maven 依赖调解源码解析(三):传递依赖,路径最近者优先
    Maven 依赖调解源码解析(二):如何调试 Maven 源码和插件源码
    Maven 依赖调解源码解析(五):同一个文件内声明,后者覆盖前者
  • 原文地址:https://www.cnblogs.com/moqiutao/p/15629810.html
Copyright © 2011-2022 走看看