注意:

在编写html时,经常需要转义,才能正常显示在页面上。

并且,还可以防止xss。

解决方案:

一, 使用正则:

使用正则转码:

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

使用正则解码:

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

方法二:使用浏览器自带的。详情异步:https://www.cnblogs.com/GumpYan/p/7883133.html

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

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

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

  2. js转义和反转义html

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

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

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

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

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

  5. 【JS】JS实现Html转义和反转义(html编码和解码)的方法总结

    1.JS实现html转义和反转义主要有两种方式: 1).利用用浏览器内部转换器实现html转义: 2).用正则表达式实现html转义: 2.封装的JS工具类: var HtmlUtil = { /*1 ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Django项目解决跨域问题

    在配置文件INSTALLED_APPS中添加: 'corsheaders', 在MIDDLEWARE中添加: 'corsheaders.middleware.CorsMiddleware', 最后添加 ...

  2. HTTP 协议中 GET 和 POST 方法详解

    GET请求报文分析 1.请求行 请求方法 GET(描述该请求采用了什么请求方法),HTTP 1.0 和 1.1 协议中共包含10种请求方法.不过 HTTP 1.1 中只有8种方法. URI 请求WEB ...

  3. Shiro基础

    Factory<T>接口(org.apache.shiro.util.Factory) 接口的getInstance()方法是泛型方法,可以用来创建SecurityManager接口对象 ...

  4. java中如何模拟真正的同时并发请求?

    有时需要测试一下某个功能的并发性能,又不要想借助于其他工具,索性就自己的开发语言,来一个并发请求就最方便了. java中模拟并发请求,自然是很方便的,只要多开几个线程,发起请求就好了.但是,这种请求, ...

  5. Python的GUI用法1

    代码: #python GUI的例子1 import tkinter as tk class Window: def __init__(self,master): frame = tk.Frame(m ...

  6. AccessTokenValidation3 源码分析 jwttoken验证流程图

    processon分享地址:https://www.processon.com/view/link/5c6a0b59e4b08a7683c40fc5

  7. mysql 开发基础系列9 存储引擎 MyISAM 介绍

    MyISAM是mysql 默认存储引擎,它不支持事务,外键.但访问速度快,对事务完整性没有要求或者以select,insert 为主的应用基本上都可以使用这个引擎.每个MyISAM在磁盘上存储成3个文 ...

  8. C++版 - 剑指offer 面试题31:连续子数组的最大和 题解

    剑指offer:连续子数组的最大和 提交网址: http://www.nowcoder.com/practice/459bd355da1549fa8a49e350bf3df484?tpId=13&am ...

  9. C++版 - 剑指offer 面试题16:反转链表(Leetcode 206: Reverse Linked List) 题解

    面试题16:反转链表 提交网址: http://www.nowcoder.com/practice/75e878df47f24fdc9dc3e400ec6058ca?tpId=13&tqId= ...

  10. JVM学习(一)、垃圾收集器简介

    一.垃圾收集算法 (1)标记-清除算法:最基础的收集算法“标记--清除”(Mark-sweep)算法,算法分为“标记”和“清除”两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的 ...