Geek asks and answers

How can I remove specific html tags from a string?

I have a <textarea>user enter something, and they are allowed to enter html. After they are entered, it <textarea>will return to <span>, which contains what they just printed. However, I want to cut out certain tags, such as <script>, <div>etc., before I bring it back to <span>.

+5
source share
1 answer

Believe it or not, you can (safely) do this using a browser built into the HTML parser. Just create a new div with document.createElement, toss the contents of the text box into the div using innerHTML, and presto, you have a fully functional DOM to work with. And no, the scripts contained in this div will not be evaluated.

Here is a simple example that removes from the element all tags that do not appear in the list 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;
}
+14

More articles:


All Articles