Javascript Parse HTML: получить все внутри тега таблицы

Question

Javascript Parse HTML: получить все внутри тега таблицы

0

Если у меня есть http.responseText, хранящийся в переменной javascript, например, с именем sourcecode, который содержит весь исходный код страницы, из которого я хочу извлечь все между тегами таблицы в переменную javascript, как это сделать? Код html выглядит следующим образом:

<table border="0" width="100%" cellspacing="0" cellpadding="0" class="statusbox_ok" style="margin-top: 5px; margin-bottom: 5px">
    <tbody><tr>
        <td align="left" valign="top"><img src="http://www.10eastern.com/images/FoundPhotos/archives/archive118/dasdsa.jpg" style="margin: 2px; margin-right: 10px"></td>
        <td align="left" valign="middle" width="100%">
        Your new username is Tom.   </td>
    </tr>
    </tbody></table>

Я хочу, по крайней мере, иметь возможность извлечь:

<td align="left" valign="middle" width="100%">
            Your new username is Tom.   </td>

Не имеет значения, включает ли он все между тегами или тегами таблицы, но эта часть имеет решающее значение для извлечения в переменную javascript. Как сделать это без jquery? Благодарю.

user3466601 06 май 2014, в 18:12

Источник

0

Можете ли вы добавить атрибут id в таблицу / столбец? Каков ваш выходной сценарий в лучшем случае (столбец, или таблица, или все столбцы)? Есть ли в документе другие таблицы, которые вы хотите исключить? Если так, как мы узнаем, какой стол вам нужен?
Sam 06 май 2014, в 15:25
0

Вот с чего начать: regex101.com/r/kB8wA9
sshashank124 06 май 2014, в 15:25
0

@ Сам Нет, я не могу, поскольку сайт не принадлежит мне.
user3466601 06 май 2014, в 15:26
0

Немного улучшено: regex101.com/r/hB2pF9 . Надеюсь, это поможет вам выбрать правильный путь.
sshashank124 06 май 2014, в 15:26
0

Это нормально, это единственный стол? Потому что сейчас я работаю над тем, что будет просто захватывать столбцы таблицы, однако, если есть несколько таблиц, вы можете получить непредвиденные результаты.
Sam 06 май 2014, в 15:27
0

@Sam Это не единственная таблица.
user3466601 06 май 2014, в 15:32
0

@Sam Но разве вы не можете использовать некоторые конкретные детали в этом HTML-коде, который отфильтровывает все другие теги таблицы?
user3466601 06 май 2014, в 15:34
0

Я дал пример ответа. Я использовал класс таблицы, чтобы определить, какой нам нужен. Если это не достаточно конкретно, тогда мне нужно больше критериев относительно того, что такое «правильная» таблица (я просто догадываюсь, не видя остальных и не зная, чего вы хотите).
Sam 06 май 2014, в 15:35
0

@sam если html исходный код находится в переменной javascript с именем sourcecode, как я могу реализовать этот код для работы с ним?
user3466601 06 май 2014, в 15:41
0

@ sam Мне нужно, чтобы он работал с http.responseText.
user3466601 06 май 2014, в 15:43

Показать ещё 8 комментариев

Теги:

javascript

html

regex

1 ответ

Ещё вопросы

Можете ли вы добавить атрибут id в таблицу / столбец? Каков ваш выходной сценарий в лучшем случае (столбец, или таблица, или все столбцы)? Есть ли в документе другие таблицы, которые вы хотите исключить? Если так, как мы узнаем, какой стол вам нужен?
@ Сам Нет, я не могу, поскольку сайт не принадлежит мне.
Немного улучшено: regex101.com/r/hB2pF9 . Надеюсь, это поможет вам выбрать правильный путь.
Это нормально, это единственный стол? Потому что сейчас я работаю над тем, что будет просто захватывать столбцы таблицы, однако, если есть несколько таблиц, вы можете получить непредвиденные результаты.
@Sam Но разве вы не можете использовать некоторые конкретные детали в этом HTML-коде, который отфильтровывает все другие теги таблицы?
Я дал пример ответа. Я использовал класс таблицы, чтобы определить, какой нам нужен. Если это не достаточно конкретно, тогда мне нужно больше критериев относительно того, что такое «правильная» таблица (я просто догадываюсь, не видя остальных и не зная, чего вы хотите).
@sam если html исходный код находится в переменной javascript с именем sourcecode, как я могу реализовать этот код для работы с ним?
@ sam Мне нужно, чтобы он работал с http.responseText.

Sam · Accepted Answer · 2014-05-06T13-51-00.000Z

Обновить:

Используя эту статью, я прочитал о DOMParser() который позволяет анализировать строку в DOM-элемент с Javascript. Используя .parseFromString(), я смог разобрать HTML-строку в элемент DOM.

var html = '<html><table /></html>'; // Your source code
html = new DOMParser().parseFromString(html, "text/html");

Просто убедитесь, что вы обновили document.getElementsByTagName('table') с помощью html.getElementsByTagName('table'), так как теперь мы ищем таблицы в нашей анализируемой строке, а не в документе.

Обновлен JSFiddle.

Я избегал использования RegEx, потому что HTML не является обычным языком, и вы не должны использовать регулярные выражения для его соответствия. Кроме того, для выполнения вашей задачи достаточно чистых функций Javascript.

var tables = document.getElementsByTagName('table');
for(var tableIt = 0; tableIt < tables.length; tableIt++) {
    var table = tables[tableIt];
    if(table.className === 'statusbox_ok') {
        var columns = table.getElementsByTagName('td');
        for(columnIt = 0; columnIt < columns.length; columnIt++) {
            var column = columns[columnIt];
            console.log(column.innerHTML);
        }
    }
}

Я прокрутил все ваши элементы таблицы с помощью .getElementsByTagName(). Затем проверьте .className чтобы убедиться, что это ваша таблица statusbox_ok. Мы снова используем .getElementsByTagName() для .getElementsByTagName() всех столбцов. Вы можете использовать некоторую логику здесь, чтобы определить, какой столбец вы хотите (аналогично тому, что мы делали с классом таблицы), но затем я зарегистрировал содержимое HTML каждого столбца с помощью .innerHTML.

Проверьте этот JSFiddle для рабочего примера.

Вы гений, спасибо = D, это работает отлично.
Рад, что я мог помочь, поддержать / выбрать мой ответ, когда / если вы можете :)
Блин, если исходный код HTML находится в переменной javascript с именем sourcecode, как я могу реализовать этот код для работы с ним?
Мне нужно, чтобы это работало, работало с http.responseText.
Проверьте мое обновление @ user3466601, я знаю, может взять строку HTML и проанализировать ее в элемент DOM (который затем работает с остальной частью моего кода.
Да, работает отлично. Еще раз спасибо :).