两个方法:

1、利用用浏览器内部转换器实现html转义;

2、用正则表达式实现html转义;

var HtmlUtil = {
/*1.用浏览器内部转换器实现html编码(转义)*/
htmlEncode:function (html){
//1.首先动态创建一个容器标签元素,如DIV
var temp = document.createElement ("div");
//2.然后将要转换的字符串设置为这个元素的innerText或者textContent
(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或者textContent,即得到经过HTML解码的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
},
/*3.用正则表达式实现html编码(转义)*/
htmlEncodeByRegExp:function (str){
var temp = "";
if(str.length == 0) return "";
temp = str.replace(/&/g,"&");
temp = temp.replace(/</g,"<");
temp = temp.replace(/>/g,">");
temp = temp.replace(/\s/g," ");
temp = temp.replace(/\'/g,"'");
temp = temp.replace(/\"/g,""");
return temp;
},
/*4.用正则表达式实现html解码(反转义)*/
htmlDecodeByRegExp:function (str){
var temp = "";
if(str.length == 0) return "";
temp = str.replace(/&/g,"&");
temp = temp.replace(/</g,"<");
temp = temp.replace(/>/g,">");
temp = temp.replace(/ /g," ");
temp = temp.replace(/'/g,"\'");
temp = temp.replace(/"/g,"\"");
return temp;
},
/*5.用正则表达式实现html编码(转义)(另一种写法)*/
html2Escape:function(sHtml) {
return sHtml.replace(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];});
},
/*6.用正则表达式实现html解码(反转义)(另一种写法)*/
escape2Html:function (str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
};

来源:https://www.cnblogs.com/willingtolove/p/11059325.html

JS转义html编码的更多相关文章

  1. js为字符串编码

    js 提供了两组函数来进行字符串的编码与解码:escape()与unescape(). decodeURI()与encodeURI(); JavaScript escape() 函数 定义和使用方法 ...

  2. 在网上看到的一篇文章关于js和php编码的

    解决办法: 采用js对URL中的汉字进行escape编码. <a href="" onclick="window.open('product_list.php?p_ ...

  3. JS转义 escape()、encodeURI()、encodeURIComponent()区别详解

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...

  4. js中的编码与解码

    一.encodeURI()定义和用法 encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串, ...

  5. JS中URL编码参数(UrlEncode)

    JS中URL编码参数(UrlEncode) 网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数.参数parameter由于用类似URL的 ...

  6. js的Base64编码与解码

    js的Base64编码与解码 pc和手机app项目中,经常需要将手机自带的表情图片转换特定的编码格式与后台进行交互. Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止 ...

  7. JS三个编码函数和net编码System.Web.HttpUtility.UrlEncode比较

    JS三个编码函数和net编码比较 总结 1.escape.encodeUri.encodeUriComponent均不会对数字.字母进行编码.2.escape:对某些字符(如中文)进行unicode编 ...

  8. php接口开发时,数据解析失败问题,字符转义,编码问题

    php接口开发时,数据解析失败问题,字符转义,编码问题 情景: A平台--->向接口请求数据---->接口向B平台请求数据---->B平台返回数据给接口---->接口返回数据给 ...

  9. 同一页面引入多个JS文件的编码问题

    原来只是觉得IE解析HTML文件的时候,需要知道其传输编码,才能正确处理,而从来没有在意过JavaScript文件的编码问题.结果今天发现同一页面中的多个JavaScript文件如果保存编码不同,也会 ...

  10. 常用的js、java编码解码方法

    前言 前后端直接传输数据进行交互不就行了吗,为什么还要进行编码解码?正常情况下直接交互没问题,但当有类似以下情况出现时就需要进行编码再进行传输: 1.编码格式难以统一,导致数据交互过程出现中文乱码等问 ...

随机推荐

  1. [python] Python并行计算库Joblib使用指北

    Joblib是用于高效并行计算的Python开源库,其提供了简单易用的内存映射和并行计算的工具,以将任务分发到多个工作进程中.Joblib库特别适合用于需要进行重复计算或大规模数据处理的任务.Jobl ...

  2. 微服务开发手册之GRPC 荐

    GRPC是一个高性能.通用的开源RPC框架,基于HTTP/2协议标准和Protobuf序列化协议开发,支持众多的开发语言. @[TOC] 1 简介 在GRPC框架中,客户端可以像调用本地对象一样直接调 ...

  3. ansible部署jdk source /etc/profile 不起作用?

    问题: ansible调用playbook远程mvn执行打包时发现执行出错,找不到JAVA_HOME.我们的exporter JAVA_HOME=/usr/java/jdk1.8.0写在/etc/pr ...

  4. TypeScript 5.1 & 5.2

    getter 和 setter 可以完全不同类型了 以前我们提过,getter 的类型至少要是其中一个 setter 的类型.这个限制被突破了.现在可以完全使用不同类型了. v5.1 后,没有再报错了 ...

  5. CSS – border-radius (Rounded Corners)

    前言 之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理. 参考: Youtube – Advanced CSS Border-Radius Tutorial ...

  6. ASP.NET Core C# 反射 & 表达式树 (第四篇)

    前言 上一篇说完了动态创建表达式树, 这篇来说一说解析表达式树. 我之所以会用到是因为最近开始大量使用 trigger 来维护冗余. 但 trigger 本身并不好维护 (EF Core 也不支持), ...

  7. Figma 学习笔记 – Border

    Figma 画 Border 其实还挺难的 4 边框 可以用 build-in 的 Stroke 实现 注: border 是在内部的, 和 HTML 一直 Border Top, Right, Bo ...

  8. MySQL及navicat安装破解

    一.Navicat Premium15 下载安装包和破解工具 1.Navicat官网下载地址:http://www.navicat.com.cn/download/navicat-premium 2. ...

  9. 记一次 RabbitMQ 消费者莫名消失问题的排查

    开心一刻 今天好哥们找我借钱哥们:兄弟,我最近手头紧,能不能借我点...我:我手头也不宽裕,要不你试试银行贷款或者花呗?哥们:不行,那个借了要还的我:... 问题回顾 某天下午,生产监控告警:消息积压 ...

  10. [TK] Tourist Attractions

    题目描述 给出一张有 \(n\) 个点 \(m\) 条边的无向图,每条边有边权. 你需要找一条从 \(1\) 到 \(n\) 的最短路径,并且这条路径在满足给出的 \(g\) 个限制的情况下可以在所有 ...