如何在<p>标签内显示<div>标签代码而非解析为HTML元素？

嘿，我懂你的困扰！你想要用户输入的<div>这类HTML标签能原样显示在页面上，但现在用innerHTML的话，浏览器会把它们当成真实的HTML元素解析，而不是显示成文本。这就对了，因为innerHTML本来就是用来插入HTML内容的，要显示纯文本的话，我们得换个方式或者转义特殊字符。

方法1：用textContent替代innerHTML（最简单的方案） #

textContent属性会把所有内容都当作纯文本处理，完全不会解析HTML标签，正好符合你的需求。只需要修改你的JavaScript代码，把innerHTML换成textContent就行：

<input type="text" id="body_text" value="" /> <br />
<input type="text" id="title_text" value="" /> <br />
<button type="button" onclick="myFunction()">Try it</button>
<p id="global-title"></p>
<p id="global-body"></p>

<script>
function myFunction() {
  var x = document.getElementById("title_text").value;
  // 用textContent代替innerHTML
  document.getElementById("global-title").textContent = x;
  
  var y = document.getElementById("body_text").value;
  document.getElementById("global-body").textContent = y;
}
</script>

现在你输入<div></div>，页面就会直接显示<div></div>，而不是渲染成一个空的div元素啦。

方法2：手动转义HTML特殊字符（适合需要混合HTML的场景） #

如果你有时候需要在内容里保留一部分可解析的HTML，同时转义用户输入的标签，那可以写一个简单的转义函数，把<、>、&这些特殊字符转换成对应的HTML实体（比如<转成<，>转成>）：

<input type="text" id="body_text" value="" /> <br />
<input type="text" id="title_text" value="" /> <br />
<button type="button" onclick="myFunction()">Try it</button>
<p id="global-title"></p>
<p id="global-body"></p>

<script>
// 定义转义函数
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, function(match) {
    const escapeChars = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeChars[match];
  });
}

function myFunction() {
  var x = document.getElementById("title_text").value;
  // 转义后再用innerHTML赋值
  document.getElementById("global-title").innerHTML = escapeHtml(x);
  
  var y = document.getElementById("body_text").value;
  document.getElementById("global-body").innerHTML = escapeHtml(y);
}
</script>

这个方法的好处是，如果你以后需要让某些HTML标签生效（比如允许<b>加粗），可以修改转义函数，排除这些标签就行。

验证效果 #

不管用哪种方法，当你在输入框里输入<p> this is a <div></div> </p>，页面都会完整显示输入的内容，其中<div></div>会以文本形式呈现，完全符合你的期望。

内容的提问来源于stack exchange，提问作者Shagufta