时间戳

首页 > 解决方案 > 为什么 innerHTML 会截断我的字符串（以及如何修复它）？

javascript - 为什么 innerHTML 会截断我的字符串（以及如何修复它）？

问题描述

我有两个要输出的简单字符串（都来自用户输入）。console.log表示它们被 JavaScript 正确接收到各自的变量中，但是当我通过 输出它们时，innerHTLM第一个在“<”符号处被截断。

JavaScript

var content1 = "Dog- Happy<Hungry", content2 = "Dog- Happy<2Hungry"
console.log(content1,content2)
document.getElementById("output").innerHTML = content1 + "<br>" + content2

输出

Dog- HappyDog- Happy<2Hungry

预期产出

Dog- Happy<Hungry
Dog- Happy<2Hungry

输入来自用户，我希望他们能够使用“<”符号，因为它是此类输入的常用符号。我猜测“<”被视为 HTML 标记的开头，但我不确定。我该如何解决这个问题，以便他们可以使用“<”符号？

如果有帮助，这里是一个 JSFiddle： https ://jsfiddle.net/m79dca3p/

在 javascript 中编码 html 实体并没有帮助，因为响应者被分成最佳解决方案，因此它仍然是一个公开辩论而不是解决方案。

标签： javascriptinnerhtml

解决方案

<是您如何在 HTML 中开始标记，并且由于您使用innerHTML输入被视为 HTML。

如果您希望将输入视为纯文本，请使用一种处理文本的机制，而不是处理 HTML 的机制。

const content1 = "Dog- Happy<Hungry";
const content2 = "Dog- Happy<2Hungry";
const output = document.getElementById("output");
output.append(document.createTextNode(content1));
output.append(document.createElement('br'));
output.append(document.createTextNode(content2));
<div id=output></div>

推荐阅读