JS实现Html转义和反转义(html编码和解码)的方法总结
1、JS实现html转义和反转义主要有两种方式:
1)、利用用浏览器内部转换器实现html转义;
2)、用正则表达式实现html转义;
2、封装的JS工具类:
var HtmlUtil = {/*1.用浏览器内部转换器实现html编码(转义)*/htmlEncode:function (html){//1.首先动态创建一个容器标签元素,如DIVvar temp = document.createElement ("div");//2.然后将要转换的字符串设置为这个元素的innerText或者textContent(temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);//3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了var output = temp.innerHTML;temp = null;return output;},/*2.用浏览器内部转换器实现html解码(反转义)*/htmlDecode:function (text){//1.首先动态创建一个容器标签元素,如DIVvar temp = document.createElement("div");//2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)temp.innerHTML = text;//3.最后返回这个元素的innerText或者textContent,即得到经过HTML解码的字符串了。var output = temp.innerText || temp.textContent;temp = null;return output;},/*3.用正则表达式实现html编码(转义)*/htmlEncodeByRegExp:function (str){ var temp = "";if(str.length == 0) return "";temp = str.replace(/&/g,"&");temp = temp.replace(/</g,"<");temp = temp.replace(/>/g,">");temp = temp.replace(/\s/g," ");temp = temp.replace(/\'/g,"'");temp = temp.replace(/\"/g,""");return temp;},/*4.用正则表达式实现html解码(反转义)*/htmlDecodeByRegExp:function (str){ var temp = "";if(str.length == 0) return "";temp = str.replace(/&/g,"&");temp = temp.replace(/</g,"<");temp = temp.replace(/>/g,">");temp = temp.replace(/ /g," ");temp = temp.replace(/'/g,"\'");temp = temp.replace(/"/g,"\"");return temp; },/*5.用正则表达式实现html编码(转义)(另一种写法)*/html2Escape:function(sHtml) {return sHtml.replace(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];});},/*6.用正则表达式实现html解码(反转义)(另一种写法)*/escape2Html:function (str) {var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});}};
3、测试及效果:
1)、html代码:
<div>&</div>
<div>&</div>
<div id="testdiv"></div>
<div id="testdiv1"></div>
<div id="testdiv2"></div><div id="regdiv"></div>
<div id="regdiv1"></div>
<div id="regdiv2"></div><div id="regdiv3"></div>
<div id="regdiv4"></div>
<div id="regdiv5"></div>
2)、js测试代码:
var strHtml='<div style="color:blue">符号:&<div>';document.getElementById("testdiv").innerHTML=strHtml;var encodedHtml= HtmlUtil.htmlEncode(strHtml);// "<div style="color:blue">符号:&amp;<div>"document.getElementById("testdiv1").innerHTML=encodedHtml;var decodedHtml=HtmlUtil.htmlDecode(encodedHtml);// '<div style="color:blue">符号:&<div>'document.getElementById("testdiv2").innerHTML=decodedHtml;var strHtml_1='<div style="color:red">符号:&<div>';document.getElementById("regdiv").innerHTML=strHtml_1;var encodedHtml_1 =HtmlUtil.htmlEncodeByRegExp(strHtml_1);// "<div style="color:red">符号:&amp;<div>"document.getElementById("regdiv1").innerHTML=encodedHtml_1;var decodedHtml_1 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_1);// '<div style="color:blue">符号:&<div>'document.getElementById("regdiv2").innerHTML=decodedHtml_1;var strHtml_2='<div style="color:green">符号:&<div>';document.getElementById("regdiv3").innerHTML=strHtml_2;var encodedHtml_2 =HtmlUtil.htmlEncodeByRegExp(strHtml_2);// "<div style="color:green">符号:&amp;<div>"document.getElementById("regdiv4").innerHTML=encodedHtml_2;var decodedHtml_2 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_2);// '<div style="color:green">符号:&<div>'document.getElementById("regdiv5").innerHTML=decodedHtml_2;
4、其他的一些处理html字符串的常用方法
1)、去掉字符串中的html标签
function removeHtmlTab(tab) {return tab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签
}removeHtmlTab('<div id="test">zyl</div><span>zzc</span>');// zylzzc
2)、回车\r\n转为
标签
function return2Br(str) {return str.replace(/\r?\n/g,"<br />");
}
3)、去除开头结尾换行,并将连续3次以上换行转换成2次换行
function trimBr(str) {str=str.replace(/((\s| )*\r?\n){3,}/g,"\r\n\r\n");//限制最多2次换行str=str.replace(/^((\s| )*\r?\n)+/g,'');//清除开头换行str=str.replace(/((\s| )*\r?\n)+$/g,'');//清除结尾换行return str;
}
将多个连续空格合并成一个空格
function mergeSpace(str) {str=str.replace(/(\s| )+/g,' ');return str;
}
转载至 :https://blog.csdn.net/willingtolove/article/details/93053796?ops_request_misc=&request_id=&biz_id=102&utm_term=js%20%E8%BD%AC%E4%B9%89HTML&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-3-93053796.pc_search_result_hbase_insert&spm=1018.2226.3001.4187
JS实现Html转义和反转义(html编码和解码)的方法总结相关推荐
- js对html转义和反转义以及编码和解码
js对html转义和反转义以及编码和解码 在项目开发过程中,我会有时候遇上这样的一个业务需求:对从数据库中读取出来的html数据进行反转义,才能在当前网页当前进行渲染. 或者另一个需求,对编辑器中的文 ...
- html转义字符解码,js对html转义和反转义以及编码和解码
在项目开辟过程当中,我会有时候赶上如许的一个营业需求:对从数据库中读取出来的html数据举行反转义,才在当前网页当前举行衬着. 或许另一个需求,对编辑器中的文本举行编码再传进数据库,或许从库中读取的数 ...
- java中jq转移符,使用StringEscapeUtils对Java中特殊字符进行转义和反转义
https://blog.csdn.net/zdx1515888659/article/details/84966214 Java中转义字符反斜杠 \ 的代替方法 | repalceAll 内涵解析 ...
- TML转义字符:xss攻击与HTML字符的转义和反转义
xss与转义符 xss简单来说: XSS 攻击是页面被注入了恶意的代码 XSS 漏洞是 可以让攻击者注入恶意代码可执行的漏洞 具体参看之前写的: web开发前端安全问题总结--web前端安全问题汇总 ...
- html转义和反转义
我们把一段html代码存入数据库中,然后我们读取出来的时候,系统就给我们转义了 这时候我们把这段显示在html中就显示不出来本来的效果,只能显示一段文本 这时候我们据需要反转义了 //HTML反转义 ...
- 超级简单的 html 转义与反转义
目标 : 前后端通用,规范,实用的html转义与反转义 ps: 网上这种的html转义与反转义博客太多了,并且也更有各的简介,好处是理解的深入,但是不容易统一规范,个人更倾向于规范.加上StringE ...
- 【JavaScript框架封装】JavaScript中的文本字符串的转义和反转义的实现
版权声明:本文为博主原创文章,未经博主允许不得转载.更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/ ...
- php 转义字符处理,PHP转义与反转义字符串函数详解
在PHP语言中,字符串的转义与反转义是可以使用PHP提供的自有函数addslashes()函数和stripslashes()函数来实现. 1. addslashes()函数 addslashes() ...
- Java - 利用StringEscapeUtils对字符串进行各种转义与反转义
来自:http://blog.csdn.net/chenleixing/article/details/43456987 --------------------------------------- ...
最新文章
- 关于召开全国大学生智能车竞赛--百度智慧交通项目 培训通知(华中站)
- windows c语言 pipe,pipe 函数 (C语言)
- 小米MIX Alpha环绕屏手机还是跳票了,上市时间成迷,小米回应...
- 虚拟ip工具_《跟唐老师学习云网络》 - ip命令
- openssl做HMAC实例(C++)
- python备份文件
- 动态规划解最长公共子串
- 全票通过!数据集成平台 SeaTunnel 成功进入 Apache 孵化器!
- Python爬取网页数据
- 人性化的绘画界面设计-屁民科普
- ACdream 1430 SETI 后缀自动机
- Axure绘制左侧菜单
- python求txt文件内平均值_如何使用python计算几个.dat文件的平均值?
- 摸鱼技能学习-持续更新
- Python键盘输入
- cmd 连接 远程数据库
- CATIA工程图插入图框
- 《金字塔原理》读书思维导图
- 物联网细分行业_2019年全国互联网细分市场可靠性研究与报告
- 二叉树前中后序遍历以及节点计算
热门文章
- 经典算法:字典序排列
- SSL踩坑ERR_SSL_VERSION_OR_CIPHER_MISMATCH
- linphone呼叫流程分析
- weixin-java-pay 微信退款
- html和css中的奇淫巧技:
- VIP02-RocketMQ开发模型
- MyBatis中mybatis-generator代码生成的一般过程
- 关于Python验证码识别中异常tesseract is not installedor its not in your PATH
- 图像处理与机器视觉_第三篇
- swift ~ 2020年 swift面试题