Select part of text in a tag

Question

The DOM structure looks like this (existing website ... cant modify it):

<table>
<tr><td>
<br><hr size="1"><strong>some heading 1</strong><br>
<br>some text 1<br>

<br><hr size="1"><strong>some heading 2</strong><br>
<br>some text 2<br>
</td></tr>
</table>

I want to manipulate it so that it looks like this

<table>
<tr><td>
<br><hr size="1"><strong>some heading 1</strong><br>
<br>some text 1<br>
</td></tr>
<tr><td>
<br><hr size="1"><strong>some heading 2</strong><br>
<br>some text 2<br>
</td></tr>
</table>

Using the solution posted here, I am able to get hold of the hr, strong, br tags and move them into new td elements. However, I am not able to get hold of "some text 1" since it is directly contained within the td and using .text() on td will give me both "some text 1" as well as "some text 2".

Any idea?

Answer 1

Maybe try this, it's not pretty but it should work...

html = $("table tr td").html();
someText1 = html.split("<br>")[3];
someText2 = html.split("<br>")[7];

That will give you the text that you were unable to parse out and you seem to have the rest figured out.

Answer 2

Yeah, jQuery doesn't help much with text nodes. You often have to use regular DOM methods. Something like:

// Split on each `<hr>` inside a table cell except the first
//
$(mytablecell).children('hr').slice(1).each(function() {
    // Create the next row
    //
    var rowi= mytablecell.parentNode.rowIndex;
    var newrow= $(mytablecell).closest('table')[0].insertRow(rowi+1);
    var newcell= newrow.insertCell(0);

    // Move all nodes starting with the current `<hr>` into the next row
    //
    var node, next= this;
    while (node= next) {
        var next= node.nextSibling;
        newcell.appendChild(node);
    }
});

Answer 3

You can use .contents() to collect all children including text nodes. The following code searches for the second hr (to be robust) and moves the preceding br and everything behind to the newly created td. I've tested it in google chrome.

$('table tr td').each(function() {
    var firtHrSeen = false;
    var indexOfSecondHr = -1;
    var allChildren = $(this).contents();
    allChildren.each(function(index) {
        if ($(this).is('hr')) {
            if (firtHrSeen) {
                indexOfSecondHr = index;
                return false; // break out of each()
            } else {
                firtHrSeen = true;
            }
        }
    });

    if (indexOfSecondHr != -1) {
        var newTd = ($('<tr><td></td></tr>').insertAfter(this.parentNode))[0].firstChild;
        allChildren.slice(indexOfSecondHr - 1).each(function(index) {
            newTd.appendChild(this);
        });
    } else {
        // not found. something went wrong
    }
});