Как я могу сделать код HTML незавершенным?

Question

Что я хочу сделать, так это позволить пользователю вводить строку, а затем отображать эту строку на веб-странице внутри элемента div, но я не хочу, чтобы пользователь мог добавлять жирный тег или что-либо, что действительно могло бы сделать текст 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;, но как функция, yo u может использовать его проще inline, например, запускать уценку после того, как вы дезинфицируете(), чтобы вы могли вставлять довольно-взвешенный формат (например. связывание URL-адресов) без запуска произвольного HTML-кода от пользователя.

Answer 2

Используйте createTextNode (значение) и добавьте его в свой элемент (стандартное решение) или innerText (нестандартное решение) вместо innerHTML.

Для решения JQuery рассмотрите ответ Дэна Вебера.

Answer 3

использовать .text() при настройке текста в div, а не в формате .HTML. Это будет выглядеть как текст вместо 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>