How to search specific attribute within a tag and remove it using javascript regex

Question

Basically I have this kind of tag (just for example)

<div type="text" onclick="event();" onblur="event();">this div has onclick and onblur functions</div>

and I want to remove some attributes to that tag using a reference variable.

var refAttribs = ['onclick', 'onblur'];

So it should strip out all attributes from refAttribs. Be careful not to strip out the content of the div. Because it also contains a string from the refAttribs variable.

How do I get rid of them using a regex? Thanks in advance

What have you tried? In what way did it not work? Why do you need a regex? Are you allowed to use other techniques, or is this a homework question? — Rob Baillie
– Rob Baillie, Commented Dec 18, 2013 at 10:21
I can't see how to use regex in this case since you don't handle the entire code as text, but as a dom tree. — DontVoteMeDown
– DontVoteMeDown, Commented Dec 18, 2013 at 10:24
I edit my question. The tag is a string. SO I want to use regex to stripout attributes from the reference variable. I'm no good on regex so I did try to ask a question here. Any techniques are allowed of course. Thanks — Kenneth P.
– Kenneth P., Commented Dec 18, 2013 at 10:27
If you're worried about script injection, just stripping out on* attributes isn't good enough. You also need to watch out for stuff like <iframe src="javascript:alert('hi')"></iframe>, among other things. — Dagg Nabbit
– Dagg Nabbit, Commented Dec 18, 2013 at 11:37
Using regex to look into HTML is not a good idea, as always.. — Teejay
– Teejay, Commented Dec 18, 2013 at 12:11

John Lay · Accepted Answer · 2013-12-18 11:16:29Z

2

As you've stated the tag is a string then you could santise it with the following javascript.

var refAttribs = ['onclick', 'onblur'];
function remove(tagToClean)
{
    var result = tagToClean;

    for(var i=0; i<refAttribs.length; i++)
    {
        regex = new RegExp(refAttribs[i] + "=\"[a-zA-Z\(\);]*?\"", "g");
        result = result.replace(regex, "");
    }

    return result;
}

You can call the method by passing in your string.

remove('<div type="text" onclick="event();" onblur="event();">this div has onclick and onblur functions</div>');

I'm not 100% sure what you're trying to do here. Are you trying to modify the DOM? If so you will need to modify the method to accept a handle to a DOM node. A little more information would help.

answered Dec 18, 2013 at 11:16

John Lay

3014 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew · Accepted Answer · 2013-12-18 11:36:58Z

1

Well, try this:

To remove onclick, the regex will be:

    (<[^>]+)\s+onclick\s*=[\'"].*?[\'"]

Regular expression visualization

Debuggex Demo

The removeAttr function:

function removeAttr(html, attr) {

    return html.replace(new RegExp('(<[^>]+)\\s+' + attr + '\\s*=[\'"].*?[\'"]', 'gi'), '$1');
}

http://jsfiddle.net/rooseve/pC4aH/1/

answered Dec 18, 2013 at 11:36

Andrew

5,3601 gold badge22 silver badges22 bronze badges

1 Comment

Kenneth P. Over a year ago

Wow thanks, this is what I'm looking for. Only between < > and looking globaly, thanks for this

Collectives™ on Stack Overflow

How to search specific attribute within a tag and remove it using javascript regex

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related