HTML编解码说明/在线HTML编解码

encodeHTMl

const encodeHTML = (html: string): string => {
const div = document.createElement('div');
div.textContent = html;
return div.innerHTML;
} const decodeHTML = (html: string): string => {
const div = document.createElement('div');
div.innerHTML = html;
return div.innerText || div.innerHTML;
} const html = '<p>html decode/encode test &</p>';
let encodedHTML = encodeHTML(html);
let decodedHTML = decodeHTML(encodedHTML);
console.log(`raw html: ${html}`);
console.log(`encoded html: ${encodedHTML}`);
console.log(`decoded html: ${decodedHTML}`); console.log(`&amp;&lt;p&gt;aaa&lt;/p&gt;`)

HTML编码(encodeHTMl)

对HTML编码就是对HTML文档中的特殊字符进行编码, 使得浏览器不会将这些内容识别为HTML文档内容;

会变编码的字符如

  • &: &amp
  • <: &lt;
  • >: &gt

HTML解码(decodeHTML)

HTML编码的逆过程, 将HTML中进行过编码的字符恢复为原来的字符

  • &amp: &
  • &lt;: <
  • &gt: >

js实现encodeHTML和decodeHTML的更多相关文章

  1. javascript; JS版HtmlEncode方法,结果与C#中HttpUtility.HtmlEncode方法一样。

    <script type="text/javascript"> function HTMLEncode(html) { var temp = document.crea ...

  2. 彻底解决“从客户端中检测到有潜在危险的Request.Form值”

    类似设置validateRequest="false"的方法不推荐,因为应用程序需要显式检查所有输入,不方便. 1.前端使用encodeHtml函数对字符串进行编码,例: var ...

  3. WEB语言转义总结

    后台字符串嵌入前台语言输出   web语言分为后台和前台,如果后台语言嵌入方式将字符串输出到前台语言中,需要按照前台语言的要求进行转义. 因为前台各个语言都有自身的保留字符, 用于规定自身的语法格式, ...

  4. web安全之XSS攻击原理及防范

    阅读目录 一:什么是XSS攻击? 二:反射型XSS 三:存储型XSS 四:DOM-based型XSS 五:SQL注入 六:XSS如何防范? 1. cookie安全策略 2. X-XSS-Protect ...

  5. 封装自己的Common.js工具库

    Code/** * Created by LT on 2013/6/16. * Common.js * 对原生JS对象的扩展 * Object.Array.String.Date.Ajax.Cooki ...

  6. 用Javascript(js)进行HTML转义工具(处理特殊字符显示)

    转自:http://blog.csdn.net/hj7jay/article/details/51280405  众所周知页面上的字符内容通常都需要进行HTML转义才能正确显示,尤其对于Input,T ...

  7. 添加可运行的js代码

    如何在博客园的文章/随笔中添加可运行的js代码 在博客园浏览大牛们写的文章时,经常会看到在文章中混有一些可运行示例,例如司徒正美的博客中: 带有可运行示例 可以点击“运行代码” 经过一番小小的探索,掌 ...

  8. js转义和反转义html

    本文地址: http://www.cnblogs.com/daysme/p/7100553.html 下面的代码网上常用有,但不是想要的. JS实现HTML标签转义及反转义 http://blog.c ...

  9. js转义和反转义html htmlencode htmldecode

    文章目录 JS实现HTML标签转义及反转义 用Javascript进行HTML转义 1.HTML转义 2.反转义 3.一个有意思的认识 4.完整版本的代码 其他 [转义字符]HTML 字符实体< ...

随机推荐

  1. ContactCollections Design Report

    通讯录的设计采用了分层+接口+面向对象+文件操作+方法实现 分三层实现,共使用了四个包,实现业务数据访问和界面的分离     contactaccess包实现对文件的访问         包括数据访问 ...

  2. Java实现开根号运算(不使用数组和String)

    使用Java自己实现开根号运算,网上也有不少代码,多数都使用String或者数组.这里写一段只使用double基础数据类型实现的方法. private static double sqrt(int n ...

  3. JDK1.7-HashMap原理

    JDK1.7 HashMap 如何在源码上添加自己的注释 打开jdk下载位置 解压src文件夹,打开idea,ctrl+shift+alt+s打开项目配置 选择jdk版本1.7,然后点击Sourcep ...

  4. 深入理解static、volatile关键字

    static 意思是静态的,全局的.被修饰的东西在一定范围内是共享的,被类的所有实例共享,这时候需要注意并发读写的问题. 只要这个类被加载,Java虚拟机就能根据类名在运行时数据区的方法区内找到他们. ...

  5. Soat控制HAProxy 动态增减服务器

    Soat控制HaProxy 动态增减服务器 安装HaProxy-1.5.18: yum install haproxy -y yum install socat -y HaProxy-1.5.18 配 ...

  6. python模块详解 | filecmp

    简介: filecmp是python内置的一个模块,用于比较文件及文件夹的内容,它是一个轻量级的工具,使用非常简单 两个主要的方法: filecmp.cmp(f1, f2[, shallow]) 比较 ...

  7. python常见题型

    语言特性 1. 谈谈对 Python 和其他语言的区别 2. 简述解释型和编译型编程语言 3. Python 的解释器种类以及相关特点? 4. Python3 和 Python2 的区别? 5. Py ...

  8. 【Linux】Linux进程间通信的几种方式

    一.进程间通信的目的 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几M字节之间 共享数据:多个进程要操作共享数据,一个进程对共享数据 信息传递:一个进程需要向另一个进程发 ...

  9. UVA - 387 A Puzzling Problem

    题目链接: https://vjudge.net/problem/UVA-387 思路: 非常有意思的拼图,深搜+回溯, 输出硬伤:除了第一次之外,每次先输空格,再输出结果, 以及可能给的数据拼不成4 ...

  10. F4IF_INT_TABLE_VALUE_REQUEST选择屏幕自定义F4帮助

    今天在用 F4IF_INT_TABLE_VALUE_REQUEST函数写选择屏幕的自定义帮助的时候,发现了个问题,那就是 F4IF_INT_TABLE_VALUE_REQUEST中参数value_ta ...