Как искать значение во всех потомках textNodes (Javascript)?

Question

Так что в основном я делаю расширение для Chrome, которое сортирует результаты поиска на Ebay по их популярности (количество проданных раз).Для этого мне нужно найти все li элементы, которые имеют нисходящий текстовый узел, содержащий текст ...+ Sold, где ... - число.
По сути, результаты поиска на Ebay выглядят так:

<li class="s-item">
   <div class="s-item__wrapper clearfix">
      <div class="s-item__image-section">
         <!-- other stuff -->
      </div>
      <div class="s-item__info clearfix">         
         <!-- other stuff -->
         <div class="s-item__details clearfix">
            <!-- other stuff -->
            <div><span><span>62+ Sold</span></span></div>
         </div>
      </div>
   </div>
</li>

В каждом элементе li мне нужно найти текст Sold и извлечь номер из этого текстового узла, чтобы обработать его дальше.Как я могу это сделать?

Answer 1

Вы не можете сделать это только с помощью свойств childNodes или children, поскольку они возвращают только дочерние элементы, а не всех потомков текущего узла. Так что для этого вам придется написать собственную функцию, например:

function getDescendants(node, arr) {
      var i;
      arr = arr || [];
      for (i = 0; i < node.childNodes.length; i++) {
          arr.push(node.childNodes[i])
          getDescendants(node.childNodes[i], arr);
      }
      return arr;
  }

Используя эту функцию, вы просто перебираете всех потомков и проверяете, являются ли они текстовыми узлами (nodeType == 3), и после этого ищите в них слово Sold. После этого извлечь номер довольно легко. Что-то вроде:

var searchValue = "Sold";
var descendants = getDescendants(listItem);
for(var j = 0; j < descendants.length; j++) {
    if(descendants[j].nodeType == 3){
        if(descendants[j].nodeValue.indexOf(searchValue) > -1){
            var text = descendants[j].nodeValue.trim();
            //"37+ Sold"    for example
            var soldNr = text.substring(0, text.indexOf(searchValue)-2);  
            //you process your number(soldNr) further
        }
    }
}

Answer 2

Используйте строку селектора: выберите li.s-item span, чтобы выбрать все span s, которые происходят от li с классом s-item, проверьте, является ли единственный дочерний элемент диапазона текстовым узлом с надписью "Продано"в нем, и если да, то делайте с ним все, что вам нужно.

Если вы уверены, что любой <li> сделает, а не только те, у кого есть класс s-item, затем используйте 'li span' вместо:

document.querySelectorAll('li span').forEach(({ childNodes, textContent }) => {
  if (childNodes.length !== 1 || childNodes[0].nodeType !== 3 || !textContent.includes('Sold')) return;
  const count = textContent.match(/\d+/);
  console.log('Processing span with sold number ' + count);
});

<ul>
  <li class="s-item">
    <div class="s-item__wrapper clearfix">
      <div class="s-item__image-section">
        <!-- other stuff -->
      </div>
      <div class="s-item__info clearfix">
        <!-- other stuff -->
        <div class="s-item__details clearfix">
          <!-- other stuff -->
          <div><span><span>62+ Sold</span></span>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="s-item">
    <div class="s-item__wrapper clearfix">
      <div class="s-item__image-section">
        <!-- other stuff -->
      </div>
      <div class="s-item__info clearfix">
        <!-- other stuff -->
        <div class="s-item__details clearfix">
          <!-- other stuff -->
          <div><span><span>333+ Sold</span></span>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>