1.背景:在项目中,经常遇到一些字符需要进行转义后才能显示到界面上,如“&”,在界面中显示的是“&”,在html中书写“&”,显示在界面的中的依然是“&”。

    这时候,就需要进行转义

2.解决方案

<script>
var HtmlUtil = {
/*1.用浏览器内部转换器实现html转码*/
htmlEncode:function (html){
//1.首先动态创建一个容器标签元素,如DIV
var temp = document.createElement ("div");
//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
(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.首先动态创建一个容器标签元素,如DIV
var temp = document.createElement("div");
//2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
temp.innerHTML = text;
//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
},
/*3.用正则表达式实现html转码*/
htmlEncodeByRegExp:function (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,""");
return s;
},
/*4.用正则表达式实现html解码*/
htmlDecodeByRegExp:function (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,"\"");
return s;
}
};
</script>

使用方法:HtmlUtil.htmlDecodeByRegExp("&amp;")

参考:

http://blog.csdn.net/u013026207/article/details/53994032

https://www.cnblogs.com/leejersey/p/4568092.html

javascript对HTML字符转义与反转义的更多相关文章

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

    如果是想把本地的一个字符串串存到服务器,再次取出来的还是文本的话,就需要这个文本字符串的转义: /** * 对一个字符串的转义 * @param str * @return {*} */ functi ...

  2. JS对HTML实体字符转义和反转义

    一.名词解释 HTML实体字符: 由于在HTML中有些符号是预留的,比如在html中不能直接使用尖括号(‘<’或‘>’),会被误认为标签符号.所以需要通过HTML实体字符去进行替换: HT ...

  3. js转义和反转义html

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

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

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

  5. 使用StringEscapeUtils转义、反转义字符串

    使用commmons-lang.jar中的字符串转义工具类org.apache.commons.lang.StringEscapeUtils转义.反转义字符串,支持CSV.HTML.JAVA.Java ...

  6. 利用StringEscapeUtils对字符串进行各种转义与反转义(Java)

    apache工具包common-lang中有一个很有用的处理字符串的工具类,其中之一就是StringEscapeUtils,这个工具类是在2.3版本以上加上的去的,利用它能很方便的进行html,xml ...

  7. JS实现HTML标签转义及反转义

    今天我用ueditor时候遇到一个问题: 我从数据库中读取内容进行编辑的时候,不是有一些html标签嘛,从数据库读出来没有问题: 但是我用asp.net mvc,把读取出来的内容通过ueditor的a ...

  8. 使用StringEscapeUtils对Java中特殊字符进行转义和反转义

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

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

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

  10. 【Java----字符串转义与反转义】

    apache工具包common-lang中有一个很有用的处理字符串的工具类,其中之一就是StringEscapeUtils,这个工具类是在2.3版本以上加上的去的,利用它能很方便的进行html,xml ...

随机推荐

  1. Thinkphp5.0 路由

    路由定义: 有两种方式: (1).动态注册: eg: Route::rule('hello','index/index/hello','GET'); (2)配置式: eg: return [ 'pat ...

  2. 2. C/C++笔试面试经典题目二

    1. C和C++中struct有什么区别? [参考答案] [解析]C中的struct没有保护行为,没有public,private,protected,内部不能有函数,但可以有函数指针. 2. C++ ...

  3. Qt 学习之路 2(34):贪吃蛇游戏(4)

    Qt 学习之路 2(34):贪吃蛇游戏(4) 豆子 2012年12月30日 Qt 学习之路 2 73条评论 这将是我们这个稍大一些的示例程序的最后一部分.在本章中,我们将完成GameControlle ...

  4. Android SharedPreferences(数据存储,需掌握)

    1.SharePrefences类介绍 SharedPreferences 类提供了一个通用框架,以便您能够保存和检索原始数据类型的永久性键值对. 您可以使用 SharedPreferences 来保 ...

  5. CSS3 选择器 修改 整数个样式

    .blogbottom ul li:nth-child(4n){margin-right:0px;} 说明:4n就是每第4个.

  6. JAVA数据结构--插入排序

    插入排序(英语:Insertion Sort)是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in- ...

  7. 【算法笔记】B1037 在霍格沃茨找零钱

    1037 在霍格沃茨找零钱 (20 分) 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特( ...

  8. 洛谷 P2518 [HAOI2010]计数 (组合数)

    题面 luogu 题解 本来想练数位dp的,结果又忍不住写了组合数.. 去掉一个\(0\)可以看作把\(0\)移到前面去 那么题目转化为 \(n\)有多少个排列小于\(n\) 强制某一位比\(n\)的 ...

  9. es6 封装一个基础的表单验证

    1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...

  10. Oracle Purge和drop的区别

    转自: http://www.cnblogs.com/HondaHsu/archive/2012/09/28/2707487.html 最近发现oracle中出现了这些奇怪的表名,上网查找后发现是or ...