Question

I have a CMS with a form-module, which generates an awful markup, that makes it absolutely impossible to style. The form objects and elements is nested in an ungodly amount of tables, rows and cells.

I’m working on filtering out all the elements I need through javascript, put them in an array, and create new frontenddeveloper-friendly markup using these elements.

Inputfields, legends and fieldsets is no problem – but I have a problem filtering my labels. My labels are either wrapped like this: <tr><td>Label</td></tr> or <tr><td><b>Label</b></td></tr> – I need to filter these out, and put them in an array.

Is there a simpler way to check, if my td contains a pure string, and not an input or some other html element, other than using regex?

var regex = new RegExp(???);
jQuery("td").each( function() {
    if(jQuery(this).has("b") || regex.test(jQuery(this).text()))
    {
        // Do stuff here
    }
}

Thanks in advance

Answer 1

This will return all of the td’s that either have no children or have a single child which is a bold tag.

$('td').filter(function() {
    var children = $(this).children();
    return children.length == 0 
              || (children.length == 1 && children.first().is('b'))
});

http://jsfiddle.net/t9bMG/

If you want to only return elements that actually have text you can use this:

$('td').filter(function() {
    var t = $(this), children = t.children();
    return t.text().length > 0 
               && (children.length == 0 
                    || (children.length == 1 && children.first().is('b')))
})

http://jsfiddle.net/t9bMG/1/