javascript - JavaScriptを使用してタグに特定の属性を許可するにはどうすればよいですか？

Question

たとえば、次のような文字列があります。<div style='text-align:center;' otherattr="script">

特定の属性を許可したい。たとえば、スタイル属性のみを許可したい。

戻るはずです：<div style='text-align:center;'>

属性style、href、src、およびalignを許可したいと思います。

どうもありがとう。

Answer 1

コメントで誰かが言ったように、これを行う最良の方法は、文字列を要素として解析し、その上でDOMメソッドを使用することです。正規表現は、一般的にDOM処理には適していません。

これにより、属性は許可idされますが、他の属性は削除されます。

    //prep
    var str = "<div id='something' class='something_else'></div>",
    allowed_attrs = ['id'],
    tmp_container = document.createElement('div'),;

    //parse string as element and retrieve it as one
    tmp_container.innerHTML = str;
    var div = tmp_container.querySelector('div');

    //remove any non-allowed attributes
    for (var i=0; i<div.attributes.length; i++)
        if (allowed_attrs.indexOf(div.attributes[i].name) == -1)
            div.removeAttribute(div.attributes[i].name);

    //check
    alert(tmp_container.innerHTML); //<div id='something'></div>

Answer 2

jqueryを使用できます

var tmp = $('<div style="text-align:center;" otherattr="script">');
var elem = $('<div>');
elem.attr('style', tmp.attr('style'))
elem.attr('href', tmp.attr('href'))
elem.attr('src', tmp.attr('src'))
elem.attr('align', tmp.attr('align'));

Answer 3

この正規表現は、指定した属性のみに一致します。一致したものをコピーして新しいタグに貼り付け、開始元のタグを置き換えることができます

(style|href|src|align)=((".+?[^\\]")|('.+?[^\\]'))