Соскребание текста в браузере - PullRequest
Новая
       31

Соскребание текста в браузере

0 голосов
/ 16 февраля 2019

Я пытаюсь извлечь текст из html с помощью атрибута innerText, например: console.log (document.getElementById ('row'). InnerText)

Однако вывод не такойкак я вижу это в браузере.

Причина разницы в том, что элемент таблицы в первой ситуации содержит стиль inline-block (см. ниже).

Как я могу это решитьпоэтому я получаю текст в том же формате, что и в браузере?

Ситуация # 1: Ввод: 

<html>
   <body id='test'>
      <table style="display: inline-block">
         <tr>
            <td>1</td>
         </tr>
         <tr>
            <td>2</td>
         </tr>
      </table>
      <table style="display: inline-block">
         <tr>
            <td>3</td>
         </tr>
         <tr>
            <td>4</td>
         </tr>
      </table>
   </body>
</html>

Ожидаемый результат: 

1 3
2 4

Фактический вывод 

1
2
3
4

Ситуация № 2: Ввод: 

<html>
   <body id='test'>
      <table>
         <tr>
            <td>1</td>
         </tr>
         <tr>
            <td>2</td>
         </tr>
      </table>
      <table>
         <tr>
            <td>3</td>
         </tr>
         <tr>
            <td>4</td>
         </tr>
      </table>
   </body>
</html>

Ожидаемый результат: 

1 
2 
3
4

Фактический результат 

1
2
3
4

1 Ответ

0 голосов
/ 16 февраля 2019

Хотя кажется, что должен быть более простой способ, DOM не понимает видимый порядок, поэтому вам, вероятно, придется транспонировать значения вручную, например: 

    // Populates domOrder from DOM (Note: These example selectors are fragile)
    const domOrder = [], visibleOrder = [];
    // Uses spread operator to get an array of tables
    const inlineTables = [...document.querySelectorAll("table")]
      .filter(table => table.style.display == "inline-block")
        .forEach(table => {
          // Gets rows
          [...table.children]
            // I'm not certain whether splitting on newlines is always reliable
            .forEach(tr => domOrder.push(tr.innerText.split(/\n/g)));
        });
    // Populates visibleOrder by transposing values from domOrder
    const rowCount = domOrder.length;
    const colCount = domOrder[0].length;
    domOrder[0].forEach( (col, colNum) => { 
      // Adds a row to visibleOrder
      visibleOrder[colNum] = []; 
      // Transposes the values 
      domOrder.forEach( (row, rowNum) => {
        visibleOrder[colNum][rowNum] = domOrder[rowNum][colNum];
      });
    });
    console.log(visibleOrder);
    <table style="display: inline-block">
       <tr><td>1</td></tr>
       <tr><td>2</td></tr>
    </table>
    <table style="display: inline-block">
       <tr><td>3</td></tr>
       <tr><td>4</td></tr>
    </table>
    <table style="display: inline-block">
       <tr><td>5</td></tr>
       <tr><td>6</td></tr>
    </table>

А вот более надежный пример преобразования матрицы .

...