javascript - HTML: div 内の HTML コードのレンダリングを停止する

Question

テキストエリア内に以下のようなものを書くと

<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

HTMLフォーマットをエスケープする必要があります

これはうまくいくはずです

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

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 1 · Accepted Answer

<および>文字を 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