转义的 HTML 字符进行转义。

• 使用String.prototype.replace()方法与匹配需要转义的字符的正则表达式一起使用。
• 使用函数的回调，使用字典（对象）将每个转义字符实例替换为其关联的非转义字符。

JavaScript

const unescapeHTML = str =>
  str.replace(
    /&|<|>|'|"/g,
    tag =>
      ({
        '&': '&',
        '<': '<',
        '>': '>',
        ''': "'",
        '"': '"'
      }[tag] || tag)
  );

示例代码：

unescapeHTML('<a href="#">Me & you</a>');
// '<a href="#">Me & you</a>'

更多内容请访问我的网站：https://www.icoderoad.com

产生原因：

我们知道html是如这些标签包含的格式化文本，当用浏览器打开时，浏览器内部的标签解释器把不同的标签解释为不同的含义。这时默认所有内容都是在标签之内的，标签本身并不是内容。如果内容中也有标签怎么办？这是个问题吗？当然。当一个负责讲解html是什么的页面输出时，html页面中必然包含有标签需要输出显示，而浏览器并不能智能的分清楚哪些是需要解释哪些不需要。

解决方法：

其中一个办法就是转义。为了区分需要解释和不需要解释的<>，将不需要解释的<>用转义字符代替，html会将它们解释为<>。和html一样，其他编程语言也有一些内置特殊符号需要用这样的方法处理，比如php中的$，下面列举一些：

如HTML转义符、java 转义符、xml 转义符、 oracle 转义符、sql 转义符 、sqlserver 转义符、php 转义符、asp 转义符、vb转义符、 javascript 转义符等等，还有网址中的百分号。

转义字符串有三部分组成:

＆符号+实体名称/编号+；符号

例如，HTML的< >&"©的转义字符串分别是

“＆lt;”或者“＆＃60;”

“＆gt;”或者“＆＃62;”

“＆amp;”或者“＆＃38;”

“＆quot;”或者“＆＃34;”

“＆copy;”或者“＆＃169;”

在高级编程语言中已经将转义字符的转义处理做成了函数。如php中的htmlspecialchars()负责将函数参数转为对应的转义字符串

ext()方法会把包含的字符转义处理,html()则不会.所谓转义就是字符的另一种显示方法,例如"<" 显示成 "<",这就是转义了,其中的<就是<的转义字符.还有很多可以转义的字符,可以搜索下看看.

下边是项目中用到的2个语句:span中包含了jquery的语句输出结果.

1. $('.title').text("<img src=" ">");

显示结果为<img src=" ">,这里的<img src=" ">不会被解析成html的img标签,而是以存字母文字的形式显示,也就是单纯的字符串:<img src=" "> .并且f12查看源码时看到span包含的<img src=" ">文字内容外层有双引号哦.看下图,

​

如果你用右键选择编辑为html,则看到其中的转义字符<这就说明我们的<被转移了,

​

如果我们想把<img>显示成标签,被浏览器解析.那么就需要如下方法.

2. $('.title').html("<img >");

显示结果为解析后的html代码段,那么这里的<img >就会按照h5的标签img图片进行解析显示了.下图是f12的页面代码结果span中的<img>标签外层无双引号,且页面此时会显示出来图片.

​

​