how to remove all ClientEvents from anchors in an HTML String with jQuery

Question

I've been struggling with what seems to be a simple problem for a few hours now. I've written a REGEX expression that works however I was hoping for a more elegant approach for dealing with the HTML. The string would be passed in to the function, rather than dealing with the content directly in the page. After looking at many examples I feel like I must be doing something wrong. I'm attempting to take a string and clean it of client Events before saving it to our Database, I thought jQuery would be perfect for this.

I Want:

Some random text <a href="http://stackoverflow.com" onclick="return evilScripts();">click here</a> and a link with any event type
//to become:
Some random text <a href="http://stackoverflow.com">click here</a> and a link with any event type

Here's my code

function RemoveEvilScripts(){
    var myDiv = $('<div>').html('testing this <a href="#Foo" onclick="return runMyFunction();">Do it!</a> out');
    //remove all the different types of events
    $(myDiv).find('a').unbind();            
    return $(myDiv).html();
}

My results are, the onClick remains in the anchor tag.

Answer 1

Here's a pure Javascript solution that removes any attribute from any DOM element (and its children) that starts with "on":

function cleanHandlers(el) {

    // only do DOM elements
    if (!('tagName' in el)) return;

    // attributes is a live node map, so don't increment
    // the counter when removing the current node
    var a = el.attributes;
    for (var i = 0; i < a.length; ) {
        if (a[i].name.match(/^on/i)) {
            el.removeAttribute(a[i].name);
        } else {
            ++i;
        }
    }

    // recursively test the children
    var child = el.firstChild;
    while (child) {
        cleanHandlers(child);
        child = child.nextSibling;
    }
}

cleanHandlers(document.body);​

working demo at http://jsfiddle.net/alnitak/dqV5k/

Answer 2

unbind() doesn't work because you are using inline onclick event handler. If you were binding your click event using jquery/javascript the you can unbind the event using unbind(). To remove any inline events you can just use removeAttr('onclick')

$('a').click(function(){ //<-- bound using script
    alert('clicked');
    $('a').unbind(); //<-- will unbind all events that aren't inline on all anchors once one link is clicked
});

http://jsfiddle.net/LZgjF/1/

Answer 3

I ended up with this solution, which removes all events on any item.

function RemoveEvilScripts(){
    var myDiv = $('<div>').html('testing this <a href="#Foo" onclick="return runMyFunction();">Do it!</a> out');
    //remove all the different types of events
     $(myDiv)
        .find('*')
        .removeAttr('onload')
        .removeAttr('onunload')
        .removeAttr('onblur')
        .removeAttr('onchange')
        .removeAttr('onfocus')
        .removeAttr('onreset')
        .removeAttr('onselect')
        .removeAttr('onsubmit')
        .removeAttr('onabort')
        .removeAttr('onkeydown')
        .removeAttr('onkeypress')
        .removeAttr('onkeyup')
        .removeAttr('onclick')
        .removeAttr('ondblclick')
        .removeAttr('onmousedown')
        .removeAttr('onmousemove')
        .removeAttr('onmouseout')
        .removeAttr('onmouseover')
        .removeAttr('onmouseup');
    return $(myDiv).html();
}