HTMLコードを実行しないようにするにはどうすればよいですか？

Question

私がしたいことは、ユーザーが文字列を入力してからdiv要素内のWebページにその文字列を表示できるようにすることですが、ユーザーが太字のタグなどを追加することはできませんHTMLテキストは太字になります。テキストがHTMLタグを持っている場合、ユーザーが入力したテキストがHTMLコードに変換されないように、どうすればいいですか？

Answer 1

ここに信頼されていないテキストをサニタイズするために小ぎれいな機能です：

function sanitize(ht){ // tested in ff, ch, ie9+ 
    return new Option(ht).innerHTML; 
} 

たとえば入力/出力：

sanitize(" Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World"); 

// == " Hello &lt;img src=data:image/png, onmouseover=alert(666) onerror=alert(666)&gt; World" 

それは設定と同じ結果が得られますelm.textContent=str;ですが、機能としては、あなたはきれいな入力をすることができるように、あなたはsanitize（）の後でmarkdownを実行するように、インラインで簡単に使うことができます（例： URLをリンクする）。

Answer 2

createTextNode（value）を使用してinnerHTMLの代わりに要素（標準ソリューション）またはinnerText（非標準ソリューション）に追加します。

JQueryソリューションについては、Dan Weberの答えをご覧ください。

Answer 3

.HTMLではなくdivにテキストを設定するときに.text（）を使用します。これはHTMLの代わりにテキストとしてレンダリングします。

$(document).ready(function() { 
 
    // Handler for .ready() called. 
 

 
    $("#change-it").click(function() { 
 
    var userLink = $('#usr-input').val().replace(/.*?:\/\//g, ""); 
 
    $('#users-text').text(userLink); 
 
    }); 
 

 

 
});

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

 
<input type="text" class="form-control" id="usr-input"> 
 
<br> 
 
<button id="change-it" type="button">Update Text</button> 
 
<br> 
 
<div id="users-text"></div>

Answer 4

.text()を使用しないのはなぜですか？

$('#in').on('keyup', function(e) { 
 
    $('#out').text($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="in"> 
 
<br> 
 
<div id="out"></div>