Regex to remove empty html tags, that contains only empty children

Question

I need to parse an HTML string and remove all the elements which contain only empty children.

Example:

<P ALIGN="left"><FONT FACE="Arial" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="1"><B></B></FONT></P>

contains no information and must be replaced with </br>

I wrote a regex like this:

<\w+\b[^>]*>(<\w+\b[^>]*>\s*</\w*\s*>)*</\w*\s*>

but the problem is that it's catching only 2 levels of the three. In the abobe example, the <p> element (the outer-most one) is not selected.

Can you help me fix this regex?

The font element has been deprecated since HTML3 so why are you still using it? — user2417483
– user2417483, Commented Nov 13, 2013 at 10:30
stackoverflow.com/q/3129738/612202 You should prefer the answer with more votes. — dan-lee
– dan-lee, Commented Nov 13, 2013 at 10:30
this is the point, I want to get rid of it. I have an older database from where I take this info. There are some notes with formatting saved as text and I want to get rid off useless elements and of font elements. I replaced them with spans — Cristian Holdunu
– Cristian Holdunu, Commented Nov 13, 2013 at 10:50

Bohemian · Accepted Answer · 2014-03-27 12:07:26Z

5

This regex seems to work:

/(<(?!\/)[^>]+>)+(<\/[^>]+>)+/

See a live demo with your example.

edited Mar 27, 2014 at 12:07

answered Nov 13, 2013 at 12:55

Bohemian♦

427k103 gold badges603 silver badges750 bronze badges

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

Comments

Philipp · Accepted Answer · 2013-11-13 10:42:12Z

2

Use jQuery and parse all children. For each child you have to check if .html() is empty. If yes -> delete the current element (or the parent if you want) with .remove().

Do for each string:

var appended = $('.yourparent').append('YOUR HTML STRING');

appended.children().each(function () 
{
    if(this.html() === '')
    {
        this.parent().remove(); 
    }
});

This will add the items first and delete, if there are empty children.

edited Nov 13, 2013 at 10:42

answered Nov 13, 2013 at 10:32

Philipp

4035 silver badges11 bronze badges

Comments

Hoàng Vũ Tgtt · Accepted Answer · 2023-08-30 15:58:26Z

0

please try this:

function removeEmtpyElements(str, iterations){
    var re = /<([A-z]+)([^>^/]*)>\s*<\/\1>/gim;
    var subst = '';
    
    for(var i = 0; i < iterations; i++){
        str = str.replace(re, subst);
    }
    
    return str;
}

answered Aug 30, 2023 at 15:58

Hoàng Vũ Tgtt

2,09226 silver badges12 bronze badges

Collectives™ on Stack Overflow

Regex to remove empty html tags, that contains only empty children

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related