javascript对HTML字符转义与反转义

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("&")

PS:使用正则

使用正则转码：

var value = document.getElementById('input').value.trim();
    //对用户输入进行转义
    value = value.replace(/&/g,"&");
    value = value.replace(/</g,"<");
    value = value.replace(/>/g,">");
    value = value.replace(/ /g," ");
    value = value.replace(/"/g,'"');

使用正则解码：

var value = e.target.innerText;
     // value = decodeURIComponent(value);
     value = value.replace(/&/g,"&");
     value = value.replace(/</g,"<");
     value = value.replace(/>/g,">");
     value = value.replace(/ /g," ");
     value = value.replace(/&quot/g,"'");

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现的反序列化json字符串操作示例

    JavaScript实现的反序列化json字符串操作示例

    本文实例讲述了JavaScript实现的反序列化json字符串操作.分享给大家供大家参考,具体如下: JavaScript中如何反序列化json字符串呢? 有如下两种方法: (1) 使用万能的eval var jsonText = '{"name":"acwong","age":23,"address":{"province":"GuangDong","city":&

  • ThinkPHP框架整合微信支付之JSAPI模式图文详解

    ThinkPHP框架整合微信支付之JSAPI模式图文详解

    本文实例讲述了ThinkPHP框架整合微信支付之JSAPI模式.分享给大家供大家参考,具体如下: 目前微信是很火的,微信支付目前很少在网上能看到一系列详细的demo,因此,花一点时间来做一下关于微信支付系列教程, 本次教程是JSAPI模式支付,其他的还会继续写下去 首先,下载微信支付的demo,我们根据微信上的demo来整合到TP中. 介绍下我们这里需要用到的几个文件: 在demo文件夹中: js_api_call.php:提供了微信jsapi的主要功能 log_.php:提供打印日志功能 no

  • ES6 如何改变JS内置行为的代理与反射

    代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代理与反射的基本概念 什么是代理和反射呢? 代理是用来替代另一个对象(target),JS 通过new Proxy()创建一个目标对象的代理,该代理与该目标对象表面上可以被当作同一个对象来对待. 当目标对象上的进行一些特定的底层操作时,代理允许你拦截这些操作并且覆写它,而这原本只是 JS 引擎的内部能

  • PHP观察者模式实例分析【对比JS观察者模式】

    本文实例讲述了PHP观察者模式.分享给大家供大家参考,具体如下: 1.用js实现观察者模式 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{width: 100px;height: 100px;border: 1px #999 solid;margin-bottom: 5px;} </style> <

  • 简单了解JavaScript中常见的反模式

    前言 反模式 是指对反复出现的设计问题的常见的无力而低效的设计模式,俗话说就是重蹈覆辙. 这篇文章描述了 JavaScript 中常见的一些反模式,以及避免它们的办法. 硬编码 硬编码(Hard-Coding)的字符串.数字.日期-- 所有能写死的东西都会被人写死. 这是一个妇孺皆知的反模式,同时也是最广泛使用的反模式. 硬编码中最为典型的大概是 平台相关代码(Platform-Related), 这是指特定的机器或环境下才可以正常运行的代码, 可能是只在你的机器上可以运行,也可能是只在 Win

  • js序列化和反序列化的使用讲解

    (1)序列化 即js中的Object转化为字符串 1.使用obj.toJSONString() var str=obj.toJSONString(); //将JSON对象转化为JSON字符 2.使用JSON.stringify(obj) var str=JSON.stringify(obj); //将JSON对象转化为JSON字符 (2)反序列化 即js中JSON字符串转化为Object 1.使用eval('('+josnStr+')') var obj=eval("("+data+&

  • JS Html转义和反转义（html编码和解码）的实现与使用方法总结

    本文实例讲述了JS Html转义和反转义(html编码和解码)的实现与使用方法.分享给大家供大家参考,具体如下: 1.JS实现html转义和反转义主要有两种方式: 1).利用用浏览器内部转换器实现html转义: 2).用正则表达式实现html转义: 2.封装的JS工具类: var HtmlUtil = { /*1.用浏览器内部转换器实现html编码(转义)*/ htmlEncode:function (html){ //1.首先动态创建一个容器标签元素,如DIV var temp = docum

  • JS实现HTML标签转义及反转义

    简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示. 这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析. 由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义. 这里提供一个非常简单有效的转义方案,利用了innerHTML和innerText 注:火狐不支持innerText,需要使用 textContent 属性,而IE早期版本不支持此属性,为了同时兼容IE及火狐,需要进行判断操作. 因为innerText(textCo

  • javascript对HTML字符转义与反转义

    javascript对HTML字符转义与反转义

    1.背景:在项目中,经常遇到一些字符需要进行转义后才能显示到界面上,如"&",在界面中显示的是"&",在html中书写"&",显示在界面的中的依然是"&". 这时候,就需要进行转义 2.解决方案 <script> var HtmlUtil = { /*1.用浏览器内部转换器实现html转码*/ htmlEncode:function (html){ //1.首先动态创建一个容器标签元

  • 在JavaScript中对HTML进行反转义详解

    在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da

  • Python对HTML转义字符进行反转义的实现方法

    Python对HTML转义字符进行反转义的实现方法

    什么是转义字符 在 HTML 中 <.>.& 等字符有特殊含义(<,> 用于标签中,& 用于转义),他们不能在 HTML 代码中直接使用,如果要在网页中显示这些符号,就需要使用 HTML 的转义字符串(Escape Sequence),例如 < 的转义字符是 <,浏览器渲染 HTML 页面时,会自动把转移字符串换成真实字符. 转义字符(Escape Sequence)由三部分组成:第一部分是一个 & 符号,第二部分是实体(Entity)名字,第三

  • js处理网页编辑器转义、去除转义、去除HTML标签的正则

    富文本编辑器生成的HTML标签,进行转义,然后写入数据库,防止脚本注入: function htmlEncode(value){ return $('<div/>').text(value).html(); } 1.从数据库拿出的转义后的HTML标签内容,先得去除转义,然后再去除HTML标签,是生成缩略文字. /*移除HTML标签代码*/ function removeHTMLTag(str) { str = str.replace(/<\/?[^>]*>/g,''); //

  • javascript实现网页字符定位的方法

    本文实例讲述了javascript实现网页字符定位的方法.分享给大家供大家参考.具体如下: 这里实现输入要查询的字符串,点击定位后程序会自动跳到匹配的位置上 <html> <form name="f1" action="" onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false"&g

  • 使用JavaScript生成罗马字符的实例代码

    生成罗马数字 这样生成有问题,到了 12 之后就不规律了 roman() { return new Array(30).fill('Ⅰ').map((lastLetter, i) => { return String.fromCharCode(lastLetter.charCodeAt(0) + i) }) } 下面这个正确的姿势 var data = { ↈ: 100000, ↂↈ: 90000, ↇ: 50000, ↂↇ: 40000, ↂ: 10000, Ⅿↂ: 9000, ↁ: 5000

  • JavaScript canvas实现字符雨效果

    JavaScript canvas实现字符雨效果

    本文实例为大家分享了JavaScript canvas实现字符雨效果的具体代码,供大家参考,具体内容如下 字符雨效果 分析如何实现 字符雨从上往下逐渐消失: 这是canvas每次画字符的时候就画一遍黑色背景,但是这个背景是有透明度的,并且这个黑色背景的透明度还比较小,只有零点零八(经过测试,0.08比较合适,也可以更改查看效果):字符是从上往下落,上面的字符先出现,下面的字符后出现,程序重复地画黑色背景,就算有透明度,叠加起来,上面的字符就会先被覆盖,下面的后出现的字符还是还比较明显,就形成了逐

  • 详解json串反转义（消除反斜杠）

    JSon串在被串行化后保存在文件中,读取字符串时,是不能直接拿来用JSON.parse()解析为JSON  对象的.因为它是一个字符串,不是一个合法的JSON对象格式.例如下面的JSON串保存在文件中,读出来不能直接解析: "{\"resourceId\":\"dfead70e4ec5c11e43514000ced0cdcaf\",\"properties\":{\"process_id\":\"proce

随机推荐