新手如何对innerHTML获得的内容转义？代码是什么

1. 什么是innerHTML？

在讲述如何对innerHTML获得的内容进行转义前，我们先来介绍一下innerHTML是什么。

innerHTML是JavaScript中一个非常重要的属性，它可以让我们访问或者修改DOM元素内的内容。在网页开发中，我们常常需要通过JavaScript来修改网页中的内容，而innerHTML就是一个非常好用的工具，因为它允许我们在JavaScript中直接通过HTML标记来设置或者获取DOM元素内的内容。

2. innerHTML与转义

虽然innerHTML非常好用，但是它也存在着一些问题，其中最典型的问题就是它会将所有的字符串转义成HTML实体，这会导致我们在修改DOM元素时无法直接添加或者显示HTML标签。

例如，在下面的代码中，我们尝试将一个带有<div>标签的字符串放入一个id为content的div中：

var str = "<div>hello</div>";
var content = document.getElementById("content");
content[xss_clean] = str;

这个代码看起来非常简单，我们在其中定义了一个带有<div>标签的字符串，然后通过innerHTML将其放到了id为content的div中。

然而，当我们在浏览器中查看这个页面时，我们会发现这个字符串并没有被解析为HTML标签，而是直接被显示了出来：

<p id="content"><div>hello</div></p>

这是因为innerHTML会默认将所有的字符串内容转义成HTML实体，因此在页面中我们看到的仅仅是转义后的字符串。当我们想要在DOM中加入带有HTML标签的字符串时，我们必须要对其进行转义处理。

3. 如何进行转义

那么，如何对innerHTML中获取的内容进行转义处理呢？常见的方法有两种：

3.1. 使用innerText替代innerHTML

一种常见的方法是使用innerText代替innerHTML。与innerHTML不同的是，innerText会将内容转义为可显示的文本内容，而不会将其中的HTML标签解析为DOM元素。

使用innerText的方法非常简单，只需要将以上的代码中的innerHTML换成innerText即可：

var str = "<div>hello</div>";
var content = document.getElementById("content");
content.innerText = str;

这么写的后果就是div这样的标签会失去作为标签的意义，直接变成显示内容了：

<div>hello</div>

3.2. 对字符串进行转义

另一种方法是对从innerHTML中获取的内容进行转义处理，这样我们就可以在DOM中添加带有HTML标签的内容了。

对字符串进行转义的方法有很多种，其中最简单的方法就是使用正则表达式进行替换。例如，我们可以用下面的代码将所有的“<”替换为“&lt;”，将所有的“>”替换为“&gt;”，以此来实现转义处理：

var str = "<div>hello</div>";
var content = document.getElementById("content");
content[xss_clean] = encodeHTML(str);
function encodeHTML (str){
  return str.replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

这样写的结果就是转义完成，输出的内容如下：

&lt;div&gt;hello&lt;/div&gt;

4. 小结

innerHTML是一个非常实用的属性，可以方便地获取或者设置DOM元素的内容。但是，在使用innerHTML时需要注意其会将所有的字符串转义成HTML实体，从而导致页面无法解析HTML标签。为了实现在DOM元素中显示HTML标签，我们通常需要对从innerHTML中获取的内容进行转义处理。常见的转义方法有使用innerText替代innerHTML和对字符串进行正则表达式替换，选择具体的方法需要根据具体情况来决定。