如果要在 html 标签内原样插入带 html 标签的文字,通常都会被自动解析掉,比如:

document.getElementsByTagName('div')[0].innerHTML="<p>ss</p>"

这个代码的结果就是这样:

如果不希望的话,就要把特殊字符转译,这里就是 </>,不过有另一种方法:

document.getElementsByTagName('div')[0].textContent="<p>ss</p>"

设置 textContent 而不是设置 innerHTML,效果如图:

因为这样浏览器自动帮你转译了,

document.getElementsByTagName('div')[0].innerHTML

这个技巧实际上提供了一个转译字符的方法:

function textToHtml (text) {
let div=document.createElement('div');
div.textContent=text;
return div.innerHTML;
}
console.log(textToHtml('<p>'));//&lt;p&gt;

反转译:

function htmlToText (html) {
let div=document.createElement('div');
div.innerHTML=html;
return div.textContent;
}
console.log(htmlToText('&lt;p&gt;'));//<p>

参考文档:

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

html 标签转译反转译的更多相关文章

  1. [Servlet&amp;JSP] 标准标签

    在JSP的规范中提供了一些标准标签(Standard Tag),全部的容器都支持这些标签,它能够协助编写JSP时降低Scriptlet的使用. 全部的标准标签都使用jsp:作为前置.这些标准标签是在J ...

  2. php面试题及答案收藏(转)

    php面试题及答案收藏(这套试题是在网上看到的,不知作者是谁) 基础题 1.表单中 get与post提交方法的区别? 答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据, ...

  3. nodejs学习笔记<四>处理请求参数

    在web开发中处理请求参数是个非常常见的工作:nodejs提供了了querystring用来处理请求参数. querystring常用方法有:parse,stringify. (1)parse: 解析 ...

  4. nodejs 初学笔记

    首先到nodejs的官网安装nodejs,地址nodejs.org,网站第一页会根据你的电脑系统推荐你适合的版本,下载,不断next,在cmd中输入 node -v 可以看到版本的话,即安装成功. 说 ...

  5. Nodejs 学习

    1,Node.js REPL交互式解释器:nodejs安装完毕后,打开终端,进入到nodejs的安装目录下,输入node,进入到新的页面,该页面称为Node.js REPL (交互式解释器):可以简单 ...

  6. node.js 基础知识之 querystring.stringify querystring.escape

    序列化   1.  querystring.stringify({name:'chenshuai',ago:21,job:"web"})    'name=chenshuai&am ...

  7. 利用jquery encoder解决XSS脚本注入所产生的问题

    问题现象:前端接收到后台一个数据(其中包含html)标签,自动转译成html页面元素,且自动执行了脚本,造成了前端页面的阻塞 接受的后台数据为大量重复的如下代码 ");</script ...

  8. XSS攻击(出现的原因、预防措施......)

    验证XSS攻击重点不是去查找可输入哪些内容会出现什么样的bug就是测试XSS攻击,重点是了解它出现的原理,为什么会出现XSS攻击,导致一些问题出现?如何防御与解决XSS攻击?以下我将简单介绍以上提出的 ...

  9. nodejs03-GET数据处理

    数据请求:--- 前台:form ajax jsonp 后台:一样 请求方式: 1.GET 数据在URL中 2.POST 数据在请求体中 请求数据组成: 头--header:url,头信息 身子--c ...

随机推荐

  1. EasyUI combobox的panelHeight自动高度

    在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...

  2. How to export Excel files in a Python/Django application

    https://assist-software.net/blog/how-export-excel-files-python-django-application CONTENTS Introduct ...

  3. Eclipse上Hadoop插件中Run On Hadoop原理[转]

    通过Eclipse的hadoop插件中的"run on hadoop"命令的原理:它不是把jar包发送到hadoop集群上去运行,而只是使用了hadoop集群上的hdfs,从hdf ...

  4. [转]软件测试 Top 120 Blog (博客)

    [转]软件测试 Top 120 Blog (博客) 2015-06-08 转自:    软件测试 Top 120 Blog (博客) # Site Author Memo DevelopSense M ...

  5. 纯css3实现的win8加载动画

    今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. JS 数组以及对象的深拷贝总结

    javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示:  如上,arr的修改,会影响arr2的值,这 ...

  7. Dom监听组合按键

    JS监听组合按键   有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键 ...

  8. 9款很酷炫jQuery/HTML5特效应用 有源码哦~

            目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...

  9. [Java] System.arraycopy 数组复制

    函数原型: public static void arraycopy(Object src, int srcPos, Object dest, int destPos, int length) ; s ...

  10. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...