Выделить часть текста в теге

Question

Структура DOM выглядит следующим образом (существующий веб-сайт ... не может изменить ее):

<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>

Я хочу манипулировать им, чтобы оно выглядело так

<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>

Используя решение, опубликованное здесь , я могу взять теги hr, strong, br и переместить их в новые элементы td. Тем не менее, я не могу заполучить «некоторый текст 1», так как он непосредственно содержится в td, и использование .text () для td даст мне как «некоторый текст 1», так и «некоторый текст 2».

Есть идеи?

Answer 1

Вы можете использовать .contents () для сбора всех дочерних элементов, включая текстовые узлы. Следующий код ищет второй час (чтобы быть устойчивым) и перемещает предыдущий br и все позади во вновь созданный td. Я проверял это в 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
    }
}); 

Answer 2

Может быть, попробуйте, это не красиво, но должно работать ...

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

Это даст вам текст, который вы не смогли разобрать, а вы, кажется, выяснили все остальное.

Answer 3

Да, jQuery мало помогает с текстовыми узлами. Вам часто приходится использовать обычные методы DOM. Что-то вроде:

// 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);
    }
});