首页 > 其他分享 >实现HTML标签的转义、反转义的几种方法

实现HTML标签的转义、反转义的几种方法

时间:2024-04-29 11:23:56浏览次数:23  
标签:标签 innerHTML 转义 HTML innerText 方法

原文链接:https://blog.csdn.net/huanggang0101/article/details/99621029

方法一:通过正则表达式进行替换
1,HTML 标签的转义方法

//HTML标签转义(  < -----> <)

function html2Escape(sHtml) {

 return sHtml.replace(/[<>&"]/g,function(c){

   return {'<':'<','>':'>','&':'&','"':'"'}[c];

 });

}

 2,HTML 标签的反转义方法

//HTML标签反转义(  < ----> < )

function escape2Html(str) {

  var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};

  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){

    return arrEntities[t];

  });

}

  

方法二:通过 innerText 与 innerHTML 配合实现转换
这个实现原理是:innerText(textContent) 会获取纯文本内容,忽略 html 节点标签,而 innerHTML 会显示标签内容。

1,HTML 标签的转义方法

我们先将需转义的内容赋值给 innerText(textContent),再获取它的 innerHTML 属性,这时获取到的就是转义后文本内容。

//HTML标签转义(< -> <)

function html2Escape(sHtml) {

  var temp = document.createElement("div");

  (temp.textContent != null) ? (temp.textContent = sHtml) : (temp.innerText = sHtml);

  var output = temp.innerHTML;

  temp = null;

  return output;

}

  

2,HTML 标签的反转义方法

反转义的方法为先将转义文本赋值给 innerHTML,然后通过 innerText(textContent) 获取转义前的文本内容。

//HTML标签反转义(< -> <)

function escape2Html(str) {

  var temp = document.createElement("div");

  temp.innerHTML = str;

  var output = temp.innerText || temp.textContent;

  temp = null;

  return output;

}

  方法三:使用 jQuery 进行转换
1,HTML 标签的转义方法

//HTML标签转义(< -> <)

function html2Escape(sHtml) {

  return $("<div/>").text(sHtml).html();

}

  2,HTML 标签的反转义方法

//HTML标签反转义(< -> <)

function escape2Html(str) {

  return $("<div/>").html(str).text();

}

  

标签:标签,innerHTML,转义,HTML,innerText,方法
From: https://www.cnblogs.com/Dongmy/p/18164837

相关文章

  • day27-HTML
    1.web开发1.1、最简单的web应用程序importsocketsock=socket.socket()sock.bind(("127.0.0.1",8800))sock.listen(5)while1:print("serverisworking...")conn,addr=sock.accept()recv_data=conn.recv(1024)conn.send(b"HTTP/1.......
  • mybatis 常用标签
    xml模板<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-//mybatis.org//DTDMapper3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappernamespace="mapper接口全限定名">......
  • web开发中特殊字符的对应值与转义字符
    原文链接:https://www.cnblogs.com/greatverve/archive/2011/07/18/web-char.htmlURL中的特殊字符URL中的特殊字符是不能再URL中直接传递的,需要进行编码。编码的格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(16进制)码值。 例:要传递字符串“this%is#te=st&ok?+/......
  • HTML转义字符
    原文链接:https://blog.csdn.net/fengxing11/article/details/39827753HTML中<,>,&等有特别含义,(前两个字符用于链接签,&用于转义),不能直接使用。使用这三个字符时,应使用他们的转义序列。转义字符串(EscapeSequence)也称字符实体(CharacterEntity)。在HTML中,定义转义字符串的原因......
  • [转]<a>标签超链接跳转到第三方系统提示:The Http request is not acceptable for the
    原文地址:TheHttprequestisnotacceptablefortherequestedresource.-CSDN博客1.问题描述在做一个点击本系统的一个按钮打开第三方链接并跳转新页面,跳转过去的第三方链接由https://ip地址组成,报以下错:TheHttprequestisnotacceptablefortherequestedresource.2.......
  • HTML一键打包APK工具一机一码功能更新 - 增强安全性
    HTML一键打包APK工具在上一个版本更新的时候,添加了一机一码功能,该功能上线以来,受到许多用户的喜爱。它可以方便的让APK只能在已经授权的手机上使用,能有效地保护APK作品,防止一些没有授权的传播。如果想要向用户收费或者限制使用范围,这个功能就非常适合。之前版本中,在HTML一键打包A......
  • HydroOJ 从入门到入土(15)批量修改题目标签(tag)
    选择还是分支?这是一个problem。好消息:搞到了一批题目!坏消息:题目没有标签好消息:导入的题目有标签!坏消息:题目标签和自己的不一样好消息:标签全部手动改完了!坏消息:还是觉得第一版好一、需求虽然理论上应该是导入之前就把标签全部调整好再导入,但实际上,导入之前调整标签并......
  • 在html中应用JavaScript
    1.在html中调用jsjs需要用<script>脚本写入位置</script>声明;也可以用外部文件引入,如<scripttype="text/javascript"src="script1.js"></script>。当js位于html的<head>内:这些脚本在选择触发它的时候被触发当js位于html的<body>内:这些脚本在页面加载时触发2.js的数据类......
  • threejs 浏览器窗口resize变化 自适应 html 全屏
    全屏:画布全屏和body页面全屏;//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene');//......
  • Matplotlib 设置x轴的标签
    在Matplotlib中,如果你有一个时间序列数据,并且x轴上的时间标签太多导致它们重叠或难以阅读,你可以通过几种方法来减少显示的标签数量或调整它们的格式。以下是一些常用的方法:使用plt.xticks()手动设置x轴标签:你可以通过plt.xticks()手动设置你想显示的x轴标签的位置和文本。imp......