Jquery将HTML代码转换为纯文本

Question

以下是我的html和jquery脚本。

<textarea id="id"></textarea>
<div class="messages"></div>

当我在textarea中输入内容并按下回车键后，它将运行以下脚本。

var x = $("textarea#id").val();
$("div.messages").append("<span class='zz'>"+x+"</span>");

它成功地工作。

但是，当我在 textarea 中输入 html 代码时，它仅显示在 textarea 中输入的 html 元素。
例如，当我输入 <b>HTML</b> 时，它会显示 HTML ，
但我需要的是 <b>HTML</b>..
我知道可以使用 .text() 替代 .html() 。
但我认为这不适用于我的代码。
因为，<span class="zz"> 应该是一个 html 元素。

- Shameel Kadannamanna

---

尝试像这样写："<span class='zz'><xmp>"+x+"</xmp?</span>" - Vinod Louis

@VinodLouis 如果用户键入了</xmp><b>adadasd</b>，它将不起作用。 - Shameel Kadannamanna

Answer 1

尝试这个：-

function escape(text) {
    return text
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

var x = $("textarea#id").val();
$("div.messages").append("<span class='zz'>"+escape(x)+"</span>");

演示

- Umesh Sehta

Answer 2

Xmp标签可以转义它

演示

$("#div1").html("<span><xmp>" + $("#id").val() + "</xmp></span>");

- Vinod Louis

---

是的，我同意，在那种情况下，被接受的答案是最优雅的。 - Vinod Louis

Answer 3

也可以尝试将值放在pre标签中，这样它就不会被解释为HTML：

$('div.messages').html('<span class="zz"><pre>' + $("#id").val() + '</pre></span>');

pre 标签内的内容无法进行样式设置。

- Raj

---

但如果用户输入了</pre><b>adadasd</b>。 - Shameel Kadannamanna

Answer 4

为什么每个人都把它搞得这么复杂？

var x = $("textarea#id").val();
$("<span class='zz'></span>").text(x).appendTo($("div.messages"));

- RoToRa

---

我认为这是更好的选择，让我检查一下。 - Shameel Kadannamanna