Question

我想要做的是允许用户输入字符串然后在div元素内的网页中显示该字符串，但我不希望用户能够添加粗体标记或任何实际使HTML文本变为粗体的内容。如果文本中包含HTML标记，我怎么能这样做才能使用户输入的文本转换成HTML代码？

Answer 1

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

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

Answer 2

在div中设置文本而不是.HTML时使用.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 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;相同的结果，但作为一个函数，您可以更容易地使用内联，比如在清理（）之后运行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>

如何使HTML代码不执行？

4 个答案: