javascript - 文字列から特定の html タグを削除するにはどうすればよいですか?

Question

<textarea>ユーザーが何かを入力すると、html を入力することが許可されます。入力が完了すると、入力<textarea>した内容を含む に戻り<span>ます。<script>ただし、 、などの特定のタグを削除してから<div>、 に戻す必要があり<span>ます。

Answer 1

信じられないかもしれませんが、ブラウザーに組み込まれている HTML パーサーを使用して (安全に) これを行うことができます。を使用して新しい div を作成しdocument.createElement、 を使用して textarea の内容を div に投げ込むだけinnerHTMLで、本格的な 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 コンテナーを作成する必要があります。これは、この手法の応用例の 1 つで、文字列をサニタイズする関数です。ただし、現時点では「サニタイズ」は誤称であることに注意してください。この「サニタイザー」が真に安全な HTML を出力するには、さらに多くの作業 (属性文字列のクリーニングなど) が必要です。

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