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

Question

我有一个<textarea>，用户可以在其中输入内容，并且允许他们输入 html。一旦他们完成输入，<textarea> 会变回包含他们刚刚输入的内容的<span>。但是，我想在将其放回 <span> 之前删除某些标签，例如 <script>、<div> 等。

Answer 1

信不信由你，您可以（安全地）使用浏览器内置的 HTML 解析器来执行此操作。只需使用document.createElement 创建一个新的div，使用innerHTML 将textarea 的内容扔到div 中，然后就可以使用完整的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 容器才能使用它。这是该技术的一个示例应用程序，它是一种清理字符串的函数。但是请注意，“sanitize”此时是用词不当——在这个“sanitizer”输出真正安全的 HTML 之前，需要做更多的工作（清理属性字符串等）。

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