HTML：停止在div中呈现HTML代码

Question

如果我在textarea中写下面的内容

<strong>test</strong>

在textarea中，然后在div中显示它。它以粗体字母显示文本，而不是显示html代码。那么我怎么能避免渲染HTML代码。我只想显示，因为文本是由用户输入的。

Answer 1

您没有向我们展示任何代码，但由于您已标记此jQuery我会假设您有类似的内容：

$('div').html(
     $('textarea').val()
);

使用text方法，因此用户键入的内容将被视为文本而非HTML。

$('div').text(
     $('textarea').val()
);

请参阅a demonstration。

Answer 2

你需要转义html格式

这应该有效

var someHtmlString = "<strong>test</strong>";
var escaped = $("div.someClass").text(someHtmlString).html();

source

Answer 3

您可以使用<pre>标记，以便按原样显示用户输入。这会保留所有格式，例如空格和换行符

<textarea  rows="4" cols="50"></textarea>
<div>
   <pre id="output">
   </pre>
</div>  

JS

$('textarea').keyup(function(){
$('#output').text($(this).val()); 
});

http://jsfiddle.net/WPQLP/5/

Answer 4

您需要将<和>字符转义为其HTML实体。

<strong>test</strong>

JSFiddle

Answer 5

<strong>test</strong>生成<strong>test</strong>

这些被称为HTML实体，其行为与此类似，因为通常<foo>表示HTML标记，并且应该呈现它。 Read more about HTML entities on w3schools