【转】 JS实现HTML标签转义及反转义
原文地址:http://blog.600km.xyz/2015/12/15/js-encode-html-tags/
简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。
这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。
由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。
这里提供一个非常简单有效的转义方案,利用了innerHTML和innerText
注:火狐不支持innerText,需要使用 textContent 属性,而IE早期版本不支持此属性,为了同时兼容IE及火狐,需要进行判断操作.
因为innerText(textContent)会获取纯文本内容,忽略html节点标签,而innerHTML会显示标签内容,
所以我们先将需转义的内容赋值给innerText(textContent),再获取它的innerHTML属性,这时获取到的就是转义后文本内容。
代码如下:
function HTMLEncode(html) {
var temp = document.createElement("div");
(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
var output = temp.innerHTML;
temp = null;
return output;
}
var tagText = "<p><b>123&456</b></p>";
console.log(HTMLEncode(tagText));//<p><b>123&456</b></p>
通过测试结果,可以看到html标签及&符都被转义后保存。
同理,反转义的方法为先将转义文本赋值给innerHTML,然后通过innerText(textContent)获取转义前的文本内容
function HTMLDecode(text) {
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
var tagText = "<p><b>123&456</b></p>";
var encodeText = HTMLEncode(tagText);
console.log(encodeText);//<p><b>123&456</b></p>
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>
Best regards
Wang Yuheng
【转】 JS实现HTML标签转义及反转义的更多相关文章
- JS实现HTML标签转义及反转义
今天我用ueditor时候遇到一个问题: 我从数据库中读取内容进行编辑的时候,不是有一些html标签嘛,从数据库读出来没有问题: 但是我用asp.net mvc,把读取出来的内容通过ueditor的a ...
- js转义和反转义html
本文地址: http://www.cnblogs.com/daysme/p/7100553.html 下面的代码网上常用有,但不是想要的. JS实现HTML标签转义及反转义 http://blog.c ...
- js转义和反转义html htmlencode htmldecode
文章目录 JS实现HTML标签转义及反转义 用Javascript进行HTML转义 1.HTML转义 2.反转义 3.一个有意思的认识 4.完整版本的代码 其他 [转义字符]HTML 字符实体< ...
- 【JS】JS实现Html转义和反转义(html编码和解码)的方法总结
1.JS实现html转义和反转义主要有两种方式: 1).利用用浏览器内部转换器实现html转义: 2).用正则表达式实现html转义: 2.封装的JS工具类: var HtmlUtil = { /*1 ...
- JS对HTML实体字符转义和反转义
一.名词解释 HTML实体字符: 由于在HTML中有些符号是预留的,比如在html中不能直接使用尖括号(‘<’或‘>’),会被误认为标签符号.所以需要通过HTML实体字符去进行替换: HT ...
- 利用StringEscapeUtils对字符串进行各种转义与反转义(Java)
apache工具包common-lang中有一个很有用的处理字符串的工具类,其中之一就是StringEscapeUtils,这个工具类是在2.3版本以上加上的去的,利用它能很方便的进行html,xml ...
- 使用StringEscapeUtils转义、反转义字符串
使用commmons-lang.jar中的字符串转义工具类org.apache.commons.lang.StringEscapeUtils转义.反转义字符串,支持CSV.HTML.JAVA.Java ...
- 使用StringEscapeUtils对Java中特殊字符进行转义和反转义
https://blog.csdn.net/zdx1515888659/article/details/84966214 Java中转义字符反斜杠 \ 的代替方法 | repalceAll 内涵解析 ...
- Java - 利用StringEscapeUtils对字符串进行各种转义与反转义
来自:http://blog.csdn.net/chenleixing/article/details/43456987 --------------------------------------- ...
- 【Java----字符串转义与反转义】
apache工具包common-lang中有一个很有用的处理字符串的工具类,其中之一就是StringEscapeUtils,这个工具类是在2.3版本以上加上的去的,利用它能很方便的进行html,xml ...
随机推荐
- 常用排序算法及Java实现
概述 在计算器科学与数学中,一个排序算法(英语:Sorting algorithm)是一种能将一串数据依照特定排序方式进行排列的一种算法.本文将总结几类常用的排序算法,包括冒泡排序.选择排序.插入排序 ...
- mongodb - save()和insert()的区别
遇到_id相同的情况下:insert操作会报错:save完成保存操作 > db.person.find() > db.person.insert({"_id":1,ag ...
- Hibernate一级缓存和二级缓存具体解释
一.一级缓存二级缓存的概念解释 (1)一级缓存就是Session级别的缓存,一个Session做了一个查询操作,它会把这个操作的结果放在一级缓存中.假设短时间内这个 session(一定要同一个ses ...
- 点滴积累【JS】---JS小功能(JS实现排序)
效果: 思路: 首先,获得用到的ID,在把得到的<li>数组添加到array数组里面,然后在进行array排序,排序完后再将array中的数据用appendChild添加到ul里面: 代码 ...
- Atitit.减少http请求数方案
Atitit.减少http请求数方案 1. 原理与方法1 1.1. -------jsp1 1.2. "index/js.txt";2 1.3. connReduceDync2 1 ...
- HDU 1978 How many ways DP问题
How many ways Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 读CLR via C#笔记
1.is 和 as 的区别 public class Employee { } a): object obj = new Employee(); if (obj is Employee) { Empl ...
- SysTick—系统定时器
本章参考资料<ARM Cortex™-M4F 技术参考手册> -4.5 章节 SysTick Timer(STK), 和4.48 章节 SHPRx,其中 STK 这个章节有 SysTick ...
- 跟着百度学PHP[17]-PHP扩展CURL的POST传输数据
如果是GET的话就不必那么多设置.但是基本需要用到POST就需要用到以下的几个设置选项. <?php $username = "admin"; $password = &qu ...
- Unity5.1 新的网络引擎UNET(四) UNET Remote Actions
孙广东 2015.7.12 网络系统 具有网络中执行操作actions 的方法.这些类型的actions 有时是调用远程过程调用(Remote Procedure Calls). 在网络系统中有两 ...