javascript replace allowed html tags

Question

I need to use javascript to remove all html tags, except for those I explicitly allow. I have a form that only allows the following tags and their respective end tags:

<b> <strong> <i> <em> <u> <br> <pre>
<blockquote> <ol> <ul> <li> 
<a href="http://www.somesite.com">link</a>

All other markup should be removed. I have been searching but I have only found instances where all tags are removed or a single tag is removed. Can this be done simply? I cannot use PHP, must be javascript. Any solutions?

Thanks!

No. You must use PHP, or your security measure is useless. — SLaks
– SLaks, Commented May 20, 2011 at 3:21
If it is something for an intranet I don't think security is an issue. Just functionality. But yes, no go in javascript... — John
– John, Commented May 20, 2011 at 3:22
As a JavaScript exercise yes, I'm sure you could write some regular expressions to find tags and remove them if they're not on your list of allowed tags, but as has been pointed out for a real-world application you must do this server-side. I would seriously consider preventing/removing all angle-bracket HTML tags and instead allow BBCode/forum style square bracket tags where only the tags you define get converted to real HTML tags for later display. — nnnnnn
– nnnnnn, Commented May 20, 2011 at 3:32
you better to use some server side either PHP/ASP or something — AjayR
– AjayR, Commented May 20, 2011 at 3:51

James Khoury · Accepted Answer · 2011-05-20 03:53:41Z

1

jQuery.fn.removeTags = function()
{
    this.each(function()
    {
        if(jQuery(this).children().length == 0)
        {
            jQuery(this).replaceWith(jQuery(this).text());
        }
        else
        {
            jQuery(this).children().unwrap();
        }
    });
    return this;
};

jQuery("#container").find(":not(b, strong, i, em, u, br, pre, blockquote, ul, ol, li, a)").removeTags();

Make sure the container is nothing higher than the body tag. Or you might have issues when it takes out head, html, script etc. tags.

Also if you want the :not could be a list and you could:

var mylist = ["b" ,"strong", ... etc. etc.];
jQuery(":not(" + mylist.join(", ") + ")").removeTags();

Or even put this in the removeTags function. (the possibilities are endless ... )

EDIT: as some have noted in the comments: Javascript can be turned off. The other thing is I assumed you wanted to keep all the inner information. If not then just a remove() will suffice as megakorre suggests.

answered May 20, 2011 at 3:53

James Khoury

22.6k4 gold badges36 silver badges66 bronze badges

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

1 Comment

Mark Over a year ago

Although this works, I have decided to use a BB code type of styling and convert them.

megakorre · Accepted Answer · 2011-05-20 03:43:19Z

1

so sipping all form of security witch im gessing is why you are doing it in the first place

you can put the content in a div and call

$('#container :not(b, strong, em, u, br, pre, blockquote, ol, ul, li, a)').remove();
var res = $("#container").html();

answered May 20, 2011 at 3:43

megakorre

2,22316 silver badges23 bronze badges

Comments

Ryan Olds · Accepted Answer · 2011-05-20 03:39:15Z

0

As pointed out in the comments, this can't be done securely. It will be very easy to to circumvent the javascript filter. This must be implemented server side.

answered May 20, 2011 at 3:39

Ryan Olds

4,84730 silver badges24 bronze badges

Collectives™ on Stack Overflow

javascript replace allowed html tags

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related