如何从字符串中删除某些html标签？

Question

我有一个<textarea>用户输入内容,并允许他们输入html.完成输入后,<textarea>更改回<span>包含他们刚输入的内容.不过,我想去掉某些标记,如<script>,<div>等...我把它前回<span>.

Answer 1

信不信由你可以(安全地)使用浏览器的内置HTML解析器.只需创建一个新的div document.createElement,将textarea的内容扔到div中使用innerHTML,并且presto,你有一个完整的DOM可以使用.不,不会评估此div中包含的脚本.

这是一个简单的示例,它从元素中剥离所有未出现在ALLOWED_TAGS列表中的标记.

var ALLOWED_TAGS = ["STRONG", "EM", "BLOCKQUOTE", "Q", "DEL", "INS", "A"];

function sanitize(el) {
    "Remove all tags from element `el' that aren't in the ALLOWED_TAGS list."
    var tags = Array.prototype.slice.apply(el.getElementsByTagName("*"), [0]);
    for (var i = 0; i < tags.length; i++) {
        if (ALLOWED_TAGS.indexOf(tags[i].nodeName) == -1) {
            usurp(tags[i]);
        }
    }
}

function usurp(p) {
    "Replace parent `p' with its children.";
    var last = p;
    for (var i = p.childNodes.length - 1; i >= 0; i--) {
        var e = p.removeChild(p.childNodes[i]);
        p.parentNode.insertBefore(e, last);
        last = e;
    }
    p.parentNode.removeChild(p);
}?

如上所述,您必须创建一个空div容器才能使用它.这是该技术的一个示例应用程序,一个清理字符串的函数.但是请注意,"清理"在这个时候是一个误称 - 在"清洁剂"输出真正安全的HTML之前,需要做更多的工作(清理属性字符串等).

function sanitizeString(string) {
    var div = document.createElement("div");
    div.innerHTML = string;
    sanitize(div);
    return div.innerHTML;
}