在 html 内容中显示 html 标签，在 html 中显示 html 代码片段

Question

我想知道是否有一种方法可以将 htmlentities() 应用于 var x，这样如果我输入

你好

进入 text area 并按下按钮，它将使用以下代码显示 hello
而不是 hello 。

提前致谢

function myFunction1() {
  var x = document.getElementById("myText1").value;
  document.getElementById("demo1").innerHTML = x;
}

<textarea name="myText" id="myText1" type="text"></textarea>
<button onclick="myFunction1()">thing</button>
<p><span id="demo1"></span></p>

Answer 1

您需要使用 <xmp> 标签

<xmp>
  <p>hello</p>
</xmp>

function myFunction1() {
  var x = document.getElementById("myText1").value;
  document.getElementById("demo1").innerHTML = x;
}

<textarea name="myText" id="myText1" type="text"></textarea>
<button onclick="myFunction1()">Show</button>
<p><xmp id="demo1"></xmp></p>

Answer 2

通常这是通过将 < 符号替换为 "less than" HTML 编码 (<)，并将 > 替换为 "greater than" (>).

例如，您应该使用基本的字符串方法来替换

"<p>hello</p>"

和

"<p>hello</p>"

（否则，将其添加到元素的内部 HTML 会将其读取为 HTML，包括标签。）

我应该指出，您也可以尝试将所有内容都包装在 <pre> 标记中，但我得到了不同的结果。我认为上面的方法是一个更安全的选择。

show html tags in html content, show html code snippet in html