js对html转义和反转义以及编码和解码

在项目开发过程中,我会有时候遇上这样的一个业务需求:对从数据库中读取出来的html数据进行反转义,才能在当前网页当前进行渲染。

或者另一个需求,对编辑器中的文本进行编码再传进数据库,或者从库中读取的数据需要进行解码才能渲染到网页上。

这时候,我们常常就会使用到转义与反转义,编码和解码。下面就是我一些项目中的代码片断,供参考,希望能给你提供个思路进行问题的解决

/** JQuery Html Encoding、Decoding
* 原理是利用JQuery自带的html()和text()函数可以转义Html字符
* 虚拟一个Div通过赋值和取值来得到想要的Html编码或者解码
*/// 项目是2014的项目,依赖库是jquery,并非现在的react/angular/vue,jq版本是1.9.// Html编码获取Html转义实体
function htmlEncode(value) {return $("<div/>").text(value).html();
}
// Html解码获取Html实体
function htmlDecode(value) {return $("<div/>").html(value).text();
}// 获取Html转义字符
function htmlEncode(html) {return document.createElement("a").appendChild(document.createTextNode(html)).parentNode.innerHTML;
}
// 获取Html
function htmlDecode(html) {var a = document.createElement("a");a.innerHTML = html;return a.textContent;
}// 编码
function html_encode(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, '"');s = s.replace(/\n/g, "<br>");return s;
}//解码
function html_decode(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, '"');s = s.replace(/<br>/g, "\n");return s;
}

js对html转义和反转义以及编码和解码相关推荐

  1. JS实现Html转义和反转义(html编码和解码)的方法总结

    1.JS实现html转义和反转义主要有两种方式: 1).利用用浏览器内部转换器实现html转义: 2).用正则表达式实现html转义: 2.封装的JS工具类: var HtmlUtil = {/*1. ...

  2. html转义字符解码,js对html转义和反转义以及编码和解码

    在项目开辟过程当中,我会有时候赶上如许的一个营业需求:对从数据库中读取出来的html数据举行反转义,才在当前网页当前举行衬着. 或许另一个需求,对编辑器中的文本举行编码再传进数据库,或许从库中读取的数 ...

  3. java中jq转移符,使用StringEscapeUtils对Java中特殊字符进行转义和反转义

    https://blog.csdn.net/zdx1515888659/article/details/84966214 Java中转义字符反斜杠 \ 的代替方法 | repalceAll 内涵解析 ...

  4. TML转义字符:xss攻击与HTML字符的转义和反转义

    xss与转义符 xss简单来说: XSS 攻击是页面被注入了恶意的代码 XSS 漏洞是 可以让攻击者注入恶意代码可执行的漏洞 具体参看之前写的: web开发前端安全问题总结--web前端安全问题汇总  ...

  5. html转义和反转义

    我们把一段html代码存入数据库中,然后我们读取出来的时候,系统就给我们转义了 这时候我们把这段显示在html中就显示不出来本来的效果,只能显示一段文本 这时候我们据需要反转义了 //HTML反转义 ...

  6. 超级简单的 html 转义与反转义

    目标 : 前后端通用,规范,实用的html转义与反转义 ps: 网上这种的html转义与反转义博客太多了,并且也更有各的简介,好处是理解的深入,但是不容易统一规范,个人更倾向于规范.加上StringE ...

  7. 【JavaScript框架封装】JavaScript中的文本字符串的转义和反转义的实现

    版权声明:本文为博主原创文章,未经博主允许不得转载.更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/ ...

  8. php 转义字符处理,PHP转义与反转义字符串函数详解

    在PHP语言中,字符串的转义与反转义是可以使用PHP提供的自有函数addslashes()函数和stripslashes()函数来实现. 1. addslashes()函数 addslashes() ...

  9. Java - 利用StringEscapeUtils对字符串进行各种转义与反转义

    来自:http://blog.csdn.net/chenleixing/article/details/43456987 --------------------------------------- ...

最新文章

  1. 如何利用业余时间提升自己
  2. css3 局部放大,CSS3/JS 鼠标悬停图片局部放大动效
  3. 修改 Angular Component 构造函数参数被认为是 breaking change
  4. 图解算法学习笔记(一): 算法简介
  5. 解压zip,解决中文乱码
  6. awk命令过滤tomcat的访日日志中IP地址
  7. 论卢伟冰加入小米公司后的变化
  8. @程序员:你的颈椎和你的代码一样有救了
  9. Phoenix使用注意事项以及跟标准sql的不同
  10. 神经网络-神经元模型、Hebb学习
  11. JAVA疫苗接种预约系统毕业设计 开题报告
  12. 对象、继承、封装、多态、抽象类的组合应用:编写工资系统,实现不同类型员工(多态)的按月发放工资。如果当月出现某个Employee对象的生日,则将在该雇员的工资上增加100元发给他。
  13. 微信小程序云开发连接MySQL数据库
  14. checkpoint NGFW VM安装
  15. EDUCoder编程练习题解(结构体)
  16. 【IoT】 产品设计:结构设计之PCB设计(三)
  17. 高通平台RF配置流程
  18. [大话设计模式C++版] 第14章 老板回来,我不知道 —— 观察者模式
  19. Android开发 之 直播视频技术探究之---基础知识大纲介绍
  20. FusionInsight,一个融合的大数据平台

热门文章

  1. C# 创建Access数据库
  2. 用计算机弹出来黎明前的黑暗,抖音勇敢面对生活是什么歌 黎明前的黑暗歌词...
  3. 现在创业什么行业比较好?
  4. 初中毕业自考计算机专业难吗,初中毕业自考本科难度大吗 都需要考什么
  5. 解决GridView内容显示不全问题
  6. unity官方案例Stealth中 激光栅栏 忽明忽暗效果实现
  7. AIR32F103(四) 27倍频216MHz,CoreMark跑分测试
  8. java中引用类型和基本类型的区别
  9. 没用东西全部清掉_魔域手游怎样清理背包?没用的东西都丢掉!
  10. 小学计算机总目标,小学科学总目标