Question

I have a string, for example: <div style='text-align:center;' otherattr="script">

I want to allow specific attributes, for example allowing only the style attribute.

It should return: <div style='text-align:center;'>

I want to allow the attributes style, href, src, and align.

Thanks a lot.

Answer 1

As someone said in the comments, the best way to do this is to parse the string as an element and use DOM methods on it. REGEX is generally a bad idea for DOM handling.

This will allow id attributes but remove any others.

    //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>