禁用输入框中的一些 html 输出

Question

我有一个像聊天框一样工作的输入。 （用户在输入中输入内容并在页面上输出）。我刚刚注意到用户还可以在我的输入框中使用 html 标签 来更改输出。

示例：如果我输入<b>Hello</b>，输出文本会加粗等等...

我不想完全禁用此功能。但是有些标签我不想输出（例如 h1 或 h2...）。我认为这是可能的正则表达式（虽然不知道如何继续进行），但我觉得可能有一个更简单的解决方案，如果没有，只需投入任何有效的方法。

下面的代码是让我的输入框工作的原因：

$('form').on('submit', function(e){
    e.preventDefault();
    checkValue();
});

function checkValue() {
    var message = document.getElementById("userinput").value;
    $('#output').html(message);
}

谢谢。

Answer 1

看看这是否符合您的需求：

var message = $('<div/>', {
    html: document.getElementById("userinput").value
}).find(':header').remove().end().html(); 

或者您可以使用例如replaceWith(function(){return '<h>'+this.innerHTML+'</h>';}) 而不是remove()。

DEMO jsFiddle

Answer 2

您需要在 checkValue 函数中添加另一部分：

function checkValue() {
    var text = document.getElementById("userinput").value;
    var message = text.replace(/<h1>/g,"&#60;h1&#62;");
    $('#output').html(message);
}

查看我如何将所有 h1 元素替换为 escaped characters 和文本 (h1)。

这应该有效，您可以一次又一次地重复它以摆脱所有您不想要的东西，例如

function checkValue() {
    var text = document.getElementById("userinput").value;
    var check = text.replace(/<h1>/g,"&#60;h1&#62;");
    var check2 = check.replace(/<h2>/g,"&#60;h2&#62;");
    var message = check2.replace(/<table>/g,"&#60;table&#62;")
    $('#output').html(message);
}

这里有更多关于替换功能的内容：http://www.w3schools.com/jsref/jsref_replace.asp

这是我在这个网站上找到的另一种方式：

How can I strip certain html tags out of a string?