html 标签转译反转译
如果要在 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>'));//<p>
反转译:
function htmlToText (html) {
let div=document.createElement('div');
div.innerHTML=html;
return div.textContent;
}
console.log(htmlToText('<p>'));//<p>
参考文档:
JS实现HTML标签转义及反转义
html 标签转译反转译的更多相关文章
- [Servlet&JSP] 标准标签
在JSP的规范中提供了一些标准标签(Standard Tag),全部的容器都支持这些标签,它能够协助编写JSP时降低Scriptlet的使用. 全部的标准标签都使用jsp:作为前置.这些标准标签是在J ...
- php面试题及答案收藏(转)
php面试题及答案收藏(这套试题是在网上看到的,不知作者是谁) 基础题 1.表单中 get与post提交方法的区别? 答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据, ...
- nodejs学习笔记<四>处理请求参数
在web开发中处理请求参数是个非常常见的工作:nodejs提供了了querystring用来处理请求参数. querystring常用方法有:parse,stringify. (1)parse: 解析 ...
- nodejs 初学笔记
首先到nodejs的官网安装nodejs,地址nodejs.org,网站第一页会根据你的电脑系统推荐你适合的版本,下载,不断next,在cmd中输入 node -v 可以看到版本的话,即安装成功. 说 ...
- Nodejs 学习
1,Node.js REPL交互式解释器:nodejs安装完毕后,打开终端,进入到nodejs的安装目录下,输入node,进入到新的页面,该页面称为Node.js REPL (交互式解释器):可以简单 ...
- node.js 基础知识之 querystring.stringify querystring.escape
序列化 1. querystring.stringify({name:'chenshuai',ago:21,job:"web"}) 'name=chenshuai&am ...
- 利用jquery encoder解决XSS脚本注入所产生的问题
问题现象:前端接收到后台一个数据(其中包含html)标签,自动转译成html页面元素,且自动执行了脚本,造成了前端页面的阻塞 接受的后台数据为大量重复的如下代码 ");</script ...
- XSS攻击(出现的原因、预防措施......)
验证XSS攻击重点不是去查找可输入哪些内容会出现什么样的bug就是测试XSS攻击,重点是了解它出现的原理,为什么会出现XSS攻击,导致一些问题出现?如何防御与解决XSS攻击?以下我将简单介绍以上提出的 ...
- nodejs03-GET数据处理
数据请求:--- 前台:form ajax jsonp 后台:一样 请求方式: 1.GET 数据在URL中 2.POST 数据在请求体中 请求数据组成: 头--header:url,头信息 身子--c ...
随机推荐
- EasyUI combobox的panelHeight自动高度
在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...
- How to export Excel files in a Python/Django application
https://assist-software.net/blog/how-export-excel-files-python-django-application CONTENTS Introduct ...
- Eclipse上Hadoop插件中Run On Hadoop原理[转]
通过Eclipse的hadoop插件中的"run on hadoop"命令的原理:它不是把jar包发送到hadoop集群上去运行,而只是使用了hadoop集群上的hdfs,从hdf ...
- [转]软件测试 Top 120 Blog (博客)
[转]软件测试 Top 120 Blog (博客) 2015-06-08 转自: 软件测试 Top 120 Blog (博客) # Site Author Memo DevelopSense M ...
- 纯css3实现的win8加载动画
今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- JS 数组以及对象的深拷贝总结
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示: 如上,arr的修改,会影响arr2的值,这 ...
- Dom监听组合按键
JS监听组合按键 有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键 ...
- 9款很酷炫jQuery/HTML5特效应用 有源码哦~
目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...
- [Java] System.arraycopy 数组复制
函数原型: public static void arraycopy(Object src, int srcPos, Object dest, int destPos, int length) ; s ...
- 第二百四十七节,Bootstrap按钮和折叠插件
Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...