如何在使用innerHTML在文本上插入文本时阻止div识别HTML标记？

Question

div.innerHTML = my_text;

上面的代码存在问题：呈现HTML标记。我想要相反的行为：我希望<b>呈现为字符串，而不是任何粗体。我还希望能够使用“\ t”和“\ n”作为换行符和制表符。我该怎么办？

Answer 1

要阻止呈现HTML，只需将其转义：

div.innerHTML = my_text.replace(/</g,"&lt;");

这仍然允许解析é等HTML实体。如果您还希望这些显示为raw，请将其标记为该行的末尾：

.replace(/&/g,"&");

或者，尝试这个“清洁”选项：

while(div.firstChild) div.removeChild(div.firstChild);
div.appendChild(document.createTextNode(my_text));

Answer 2

当你应该使用div.innerText时，你正在使用div.innerHTML。

innerText不是跨浏览器，我建议你使用像jQuery这样的库，这样你就不会遇到这类问题：

使用jQuery你可以编写像

这样的东西

$('#you_div').text(str.replace(/\t/g," "));

上面的替换将'\ t'替换为“\ t”，因此您将在文本上看到\ t。

无论如何，标准似乎是属性textContent。 以下是MDN中的一些信息。

---

更好地满足您需求的另一种解决方案可能是对文本进行编码，然后将'\t'替换为    ，在此解决方案中使用属性innerHTML。