如何使HTML代码不执行？

Question

我想做的是允许用户输入一个字符串，然后在div元素内的网页中显示该字符串，但是我不希望用户能够添加粗体标签或任何实际上可以构成HTML的内容文字加粗。 如果文本中带有HTML标记，如何使用户输入的文本不会转换为HTML代码？

Answer 1

使用createTextNode（value）并将其附加到您的元素（标准解决方案）或innerText（非标准解决方案）而不是innerHTML。

对于JQuery解决方案，请查看Dan Weber的答案。

Answer 2

在div中设置文本时使用.text（）而不是.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 3

这是一个整洁的小功能，用于清除不受信任的文本：

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;相同的结果elm.textContent=str; ，但是作为一个功能，您可以使用它更简单的内联方法，例如在sanitize（）之后运行markdown，以便您可以对输入进行漂亮的格式设置（例如，链接URL），而无需运行用户的任意HTML。

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>