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

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

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

了解我如何用escaped characters和文本（h1）替换所有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?

Answer 2

看看是否符合您的需求：

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

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

DEMO jsFiddle

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

2 个答案: