Javascript Таблица XPath л oop тд

Question

Я пытаюсь создать расширение Chrome, которое будет извлекать некоторые данные из таблицы. Я хочу преобразовать ТД в ТР в простые строки с каждым столбцом, разделенным символом |, например:

01/01/2020 | XX | 57,43 | |
02/01/2020 | YY | 11,22 | |

Вот его часть:

<table width="100%" border="0" cellpadding="2" cellspacing="0">
    <tbody>
        <tr>
            <td class="TRNbarratabelac" width="3%">
                <input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
            <td class="TRNbarratabelac">Data do <br>pagamento</td>
            <td class="TRNbarratabelac">Tipo</td>
            <td class="TRNbarratabelac">Favorecido/beneficiário</td>
            <td class="TRNbarratabelac">Valor (R$)</td>
            <td class="TRNbarratabelac">Informações complementares</td>
            <td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
        </tr>
        <tr>
            <td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
            <td class="TRNlicbe">21/02/2020&nbsp;</td>
            <td class="TRNliebe">Concessionárias</td>
            <td class="TRNliebe"> &nbsp;</td>
            <td class="TRNlidbe">57,43&nbsp;</td>
            <td class="TRNlicbe"> &nbsp;</td>
            <td class="TRNlicbde" width="8%"><a href="javascript:detalharIndividual('1')" class="lnkpadrao01">Visualizar</a></td>
            <td class="TRNlicbde" width="12%"><span><a href="javascript:email('1')" class="lnkpadrao01">enviar por email</a></span>&nbsp;</td>
        </tr>
    </tbody>
</table>

Чтобы перебрать его, я использую XPath следующим образом:

function DOMtoString(doc) {

    let path_tr = '(//div[@class="contborda"])[4]/table[3]/tbody/tr[position()>1]';
    var tr = doc.evaluate(path_tr, doc, null, XPathResult.ANY_TYPE, null);    

    let alertText = '';

    let x = tr.iterateNext(); 

    while (x) {
        alertText += x.textContent;
        x = tr.iterateNext();
    }

    return alertText;
}

Здесь я получаю таблицу (игнорируя первый TR с именами столбцов), но результат таков (только некоторая его часть):

<br>   <br>   21/02/2020&nbsp;<br>   Concessionárias<br>    &nbsp;<br>   57,43&nbsp;<br>    &nbsp;<br>   Visualizar<br>   enviar por email&nbsp;<br><br>   

Я вижу, что XPath добавляет BR для этого.

Я пытаюсь l oop над TD этих TR, но безуспешно:

let path_td = '//td';
var td = tr.evaluate(path_td, tr, null, XPathResult.ANY_TYPE, null);

Как правильно я могу взаимодействовать через ТД и получать их необработанный текст без БР?

Answer 1

Используйте innerText вместо textContent, чтобы избежать разрывов строк. Вы можете использовать Document.querySelector() вместо XPath, что значительно упростит манипулирование DOM.

CSS Селекторы:

function DOMtoString() {
  let lines = [];
  let trs = document.querySelectorAll(
    'div.contborda > table:nth-of-type(2) > tbody > tr:not(:first-child)'
  );
  
  trs.forEach(tr => {
    let line = [];
    let tds = tr.querySelectorAll('td');
    
    tds.forEach(td => line.push(td.innerText.trim()));
  	lines.push(line.join('|'));
  });
  
  return lines;
}

console.log(DOMtoString());

<div class="dummy"></div>

<div class="contborda">
<table class="dummy"><tbody></tbody></table>

<table width="100%" border="0" cellpadding="2" cellspacing="0">
    <tbody>
        <tr>
            <td class="TRNbarratabelac" width="3%">
                <input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
            <td class="TRNbarratabelac">Data do <br>pagamento</td>
            <td class="TRNbarratabelac">Tipo</td>
            <td class="TRNbarratabelac">Favorecido/beneficiário</td>
            <td class="TRNbarratabelac">Valor (R$)</td>
            <td class="TRNbarratabelac">Informações complementares</td>
            <td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
        </tr>
        <tr>
            <td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
            <td class="TRNlicbe">21/02/2020&nbsp;</td>
            <td class="TRNliebe">Concessionárias</td>
            <td class="TRNliebe"> &nbsp;</td>
            <td class="TRNlidbe">57,43&nbsp;</td>
            <td class="TRNlicbe"> &nbsp;</td>
            <td class="TRNlicbde" width="8%"><a href="javascript:detalharIndividual('1')" class="lnkpadrao01">Visualizar</a></td>
            <td class="TRNlicbde" width="12%"><span><a href="javascript:email('1')" class="lnkpadrao01">enviar por email</a></span>&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>

Если у вас есть какие-либо другие причины, по которым вы хотите использовать XPath, вам следует использовать точку .//, если вы хотите выбрать узлы относительно nodeContext:

XPath:

function DOMtoString() {
  let lines = [];
  
  let path_tr = '//div[@class="contborda"]/table/tbody/tr[position()>1]';
  let tr = document.evaluate(path_tr, document, null, XPathResult.ANY_TYPE, null);    

  let x = tr.iterateNext(); 

  while (x) {
      let line = [];

      let path_td = './/td';
      var td = document.evaluate(path_td, x, null, XPathResult.ANY_TYPE, null);

      let y = td.iterateNext();
      
      while (y) {
        line.push(y.innerText.trim());
        y = td.iterateNext();
      }
      
      lines.push(line.join('|'));
      x = tr.iterateNext();
  }

  return lines;
}

console.log(DOMtoString());

<div class="dummy"></div>

<div class="contborda">
<table class="dummy"><tbody></tbody></table>

<table width="100%" border="0" cellpadding="2" cellspacing="0">
    <tbody>
        <tr>
            <td class="TRNbarratabelac" width="3%">
                <input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
            <td class="TRNbarratabelac">Data do <br>pagamento</td>
            <td class="TRNbarratabelac">Tipo</td>
            <td class="TRNbarratabelac">Favorecido/beneficiário</td>
            <td class="TRNbarratabelac">Valor (R$)</td>
            <td class="TRNbarratabelac">Informações complementares</td>
            <td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
        </tr>
        <tr>
            <td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
            <td class="TRNlicbe">21/02/2020&nbsp;</td>
            <td class="TRNliebe">Concessionárias</td>
            <td class="TRNliebe"> &nbsp;</td>
            <td class="TRNlidbe">57,43&nbsp;</td>
            <td class="TRNlicbe"> &nbsp;</td>
            <td class="TRNlicbde" width="8%"><a href="javascript:detalharIndividual('1')" class="lnkpadrao01">Visualizar</a></td>
            <td class="TRNlicbde" width="12%"><span><a href="javascript:email('1')" class="lnkpadrao01">enviar por email</a></span>&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>