首页 > 编程语言 >使用JavaScript对HTML实体字符进行转义与反转义处理

使用JavaScript对HTML实体字符进行转义与反转义处理

时间:2022-09-03 17:01:38浏览次数:94  
标签:字符 text JavaScript replace HTML 转义

原文地址:https://www.yerenwz.com/6567.html

在这篇《短代码与代码高亮功能结合,终于可以随意的来回切换可视化/文本模式进行编辑代码了》文章中有提到在折腾WordPress自带的编辑器,里面就需要用到转义来解决bug,其次的话,而且为了安全性(XSS攻击)的问题,一般都要求对用户输入的数据进行转义处理。

那么在JavaScript中怎么对HTML实体字符进行转义与反转义处理?

/**
 * 实体字符编码
 * @param {*} text 待编码的文本
 * @returns 
 */
function entitiesEncode(text) {
  text = text.replace(/&/g, "&");
  text = text.replace(/</g, "&lt;");
  text = text.replace(/>/g, "&gt;");
  text = text.replace(/ /g, "&nbsp;");
  text = text.replace(/"/g, "&quot;");
  return text;
}
/**
 * 实体字符解码
 * @param {*} text 待解码的文本
 * @returns 
 */
function entitiesDecode(text) {
  text = text.replace(/&amp;/g, "&");
  text = text.replace(/&lt;/g, "<");
  text = text.replace(/&gt;/g, ">");
  text = text.replace(/&nbsp;/g, " ");
  text = text.replace(/&quot;/g, "'");
  return text;
}

标签:字符,text,JavaScript,replace,HTML,转义
From: https://www.cnblogs.com/yerenwz/p/16653017.html

相关文章

  • HTML——hr标签&注释
    hr标签:添加水平线<html><body><p>hr标签定义水平线:</p><hr/><p>这是段落。</p><hr/><p>这是段落。</p><hr/><p>这是段落。</p></body></html>注释:可......
  • HTML——br标签
    <br/>标签:如果您希望在不产生一个新段落的情况下进行换行(新行),请使用<br/>标签:<br>还是<br/>您也许发现<br>与<br/>很相似。在XHTML、XML以及未来的HTML......
  • 为 html 设置 Tailwindcss CLI
    为html设置TailwindcssCLI以下是我用来创建基本Tailwaind设置的步骤:在VSCode中打开一个新终端并导航到您要在计算机上创建项目的任何位置(这里是终端命令的一个......
  • JavaScript的变量命名规则和关键字的介绍
    JavaScript的变量命名规则和关键字的介绍规则一:开头必须是字母或$或_规则二:关键字和保留字不能用做变量名那么能不能使用typeof做为变量名呢?想都别想!那么能不能......
  • [javascript] 构造函数与原型对象 +原型链
    构造函数与原型对象1、使用工厂方法创建对象functioncreatePerson(name,age,gender){//创建一个新的对象varobj=newObject();//向对象中添加属性......
  • [javascript] 自调用函数
    自调用函数(IIFE)作用1.隐藏实现2.利用局部作用域,避免污染全局命名空间3.用它编写js模块(function(){vara=3;console.log(a+3);})();......
  • 记录 javascript canvas ImageData 解析
    数组的内容:data.length:w*h*4r:0-255g:0-255b:0-255a:0-255Math.round(255*a) 数组遍历:constdata=context.getI......
  • JavaScript 原始值的比较和对象的比较
    原始值有null、undefined、布尔值、数字、字符串。所有的原始值,只要编码值相同,则被认为相等:letpri1=123;letpri2=123;pri1===pri2;//=>true相反,对象的比......
  • HTML、CSS 和 JavaScript 中的所有唯一字符挑战
    HTML、CSS和JavaScript中的所有唯一字符挑战HTML:<divclass="wrapper"><h1>所有独特的字符</h1><br><p>来自<ahref="https://buttondown.email/cassidoo/ar......
  • 如何使用 CSS 和 HTML 创建 Glassmorphism 效果
    如何使用CSS和HTML创建Glassmorphism效果Glassmorphism效果在现代网页设计中越来越流行Glasmorphism是一个有点新的功能,它一直在流行,并且经常在新设计的网站上受......