javascript - HTML：停止在 div 中渲染 HTML 代码

Question

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

<strong>test</strong>

在 textarea 中，然后在 div 中显示它。它以粗体显示文本，而不是按原样显示 html 代码。那么我怎样才能避免渲染html代码。我只想显示它是用户输入的文本。

score 3 · Accepted Answer

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

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

请改用该text方法，因此用户键入的内容将被视为文本而不是 HTML。

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

score 2 · Accepted Answer

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

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

js

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

score 2 · Accepted Answer

您需要转义 html 格式

这应该工作

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

score 1 · Accepted Answer

您需要将<and>字符转义为它们的 HTML 实体。

&lt;strong&gt;test&lt;/strong&gt;

score 0 · Accepted Answer

<strong>test</strong>生产<strong>test</strong>

这些被称为 HTML 实体并且行为类似，因为通常<foo>意味着一个 HTML 标记，并且它应该被渲染。在 w3schools 上阅读有关 HTML 实体的更多信息

5 回答 5