如何在 <span> 或 <div> 标签内转义 HTML答案

【问题标题】：How to escape HTML inside <span> or <div> tag如何在 <span> 或 <div> 标签内转义 HTML
【发布时间】：2017-10-19 17:21:08
【问题描述】：

<h4>    
  <span class="title">
      <textarea rows="4" cols="50"> How are you. </textarea>
  </span>
</h4>

如何将<textarea rows="4" cols="50"> How are you. </textarea> 视为字符串而不是 HTML。我不希望 HTML 呈现，我只想要进入 div 或 span 它应该呈现的任何内容。

预期结果：<textarea rows="4" cols="50"> How are you. </textarea>

【问题讨论】：

stackoverflow.com/questions/2820453/display-html-code-in-html
@Parag Bhingre 上面的评论非常描述在 html 中转义 html 标签，我的回答也很相关。这些解决了你的问题吗？

标签： javascript jquery html escaping

【解决方案1】：

你需要转义你想要显示的html

&lt; is <
&quot; is ""
&gt; is >

有一个在线工具可以为您执行此操作here，但您可以找到许多可以在运行时执行此操作的脚本。

<h4>    
<span class="title">
&lt;textarea rows=&quot;4&quot; cols=&quot;50&quot;&gt; How are you. &lt;/textarea&gt;
</span>
</h4>

【讨论】：

【解决方案2】：

使用纯 JavaScript，无需任何库，您可以使用函数将代码作为文本节点插入到某个容器中。

function insertAsText( containerId, text ) {
    var container = document.getElementById( containerId );
    var textNode = document.createTextNode( text );
    container.appendChild( textNode );
}

insertAsText( "myDiv", "<p><textarea>test</textarea></p>");

&lt;div id="myDiv"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

使用 JQuery 只需使用 text() 而不是 html() 来插入代码：

$('span').text('&lt;textarea rows="4" cols="50"&gt; How are you. &lt;/textarea&gt;');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h4>    
<span class="title"></span>
</h4>

【讨论】：

【解决方案4】：

为方便起见，我只是在目标 textarea 中添加了一个 ID：

console.log(document.getElementById('txtArea'));

<h4>
  <span class="tip" 4 "=" cols="50" original-title="title"> Hi hello 
<span class="title"><textarea rows="4" cols="50" id="txtArea"> How are you. </textarea></span>
  </span>
</h4>

【讨论】：

嗨，汤米，感谢您的快速回复。我实际上想按原样打印 textarea 标记和字符串。我不希望 textarea 出现。
我们无法将 id 添加到 textarea，因为 span 内的数据是动态的。下次TOMMY这种字符串也可以来。所以我不想让它变粗，我只想按原样打印字符串。

【解决方案5】：

纯 JavaScript：

document.getElementsByClassName("title")[0].innerHTML = "<div>HI!</div>";
//Result will be "HI!"
document.getElementsByClassName("title")[0].innerText = "<div>HI!</div>";
//Result will be "<div>HI!</div>"

jQuery:

$(".title").html("<div>HI!</div>");
//Result will be "HI!"
$(".title").text("<div>HI!</div>");
//Result will be "<div>HI!</div>"

作为最后的评论，这些方法是 get/set。

【讨论】：