Как спарсить span на сайте

Question

Мне нужно из некоего сайта спарсить все факультеты, которые находятся в элементах span. Разметка такая:

<div class="category-selector category-selector--nested">
  <div class="jss193 jss195">
    <div>
      <div class="css-10nd86i">
        <div class="jss202 jss205">
          <div class="jss206 jss213 jss207 jss210">
            <div aria-invalid="false" class="jss214 jss197" type="text">
              <div class="jss198">
                <p class="jss108 jss117 jss131 jss201">Начните вводить запрос</p>
                <div class="css-rsyb7x">
                  <div class="" style="display: inline-block;"><input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="">
                    <div></div>
                  </div>
                </div>
              </div>
              <div class="css-1wy0on6"><span class="css-d8oujb"></span>
                <div aria-hidden="true" class="css-1ep9fjw"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <h1 class="jss108 jss113 jss195">Факультет</h1>
    <div>
      <ul class="jss222 jss223 jss191">
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Агрономический факультет</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Инженерный факультет</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Отдел аспирантуры и докторантуры</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Технологический факультет</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Управление международными научно-образовательными проектами</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Факультет ветеринарной медицины</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Факультет по заочному образованию и международной работе</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Факультет среднего профессионального образования</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Экономический факультет</span></div><span class="jss71"></span></div>
      </ul>
    </div>
  </div>
</div>

Но я не знаю их regex! querySelector("span") - не работает

Вот мой код который я уже написал:

const body = document.querySelectorAll('body');


function recursy(element) {
    element.childNodes.forEach(node=>{
        
        if (node.nodeName.match(/<\/?span[^>]*>/ig)) {
             console.log(node);
        }else {
            recursy(node);
        }
    });
}

recursy(body);

Помогите с этим разобраться пожалуйста!

Answer 1

querySelectorAll принимает любые CSS-селекторы.

document.querySelectorAll(".category-selector div[tabindex='0'] > div > span");

Все span которые находятся непосредственно внутри > (первый уровень вложенности) div который находится непосредственно внутри другого div с атрибутом tabindex="0" который находится где-то внутри элемента class="category-selector"

let elems = document.querySelectorAll(".category-selector div[tabindex='0'] > div > span");

let arr = [...elems].map(span => span.textContent);

console.log(arr);

.as-console-wrapper { min-height: 100vh; }

<div class="category-selector category-selector--nested">
  <div class="jss193 jss195">
    <div>
      <div class="css-10nd86i">
        <div class="jss202 jss205">
          <div class="jss206 jss213 jss207 jss210">
            <div aria-invalid="false" class="jss214 jss197" type="text">
              <div class="jss198">
                <p class="jss108 jss117 jss131 jss201">Начните вводить запрос</p>
                <div class="css-rsyb7x">
                  <div class="" style="display: inline-block;"><input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="">
                    <div></div>
                  </div>
                </div>
              </div>
              <div class="css-1wy0on6"><span class="css-d8oujb"></span>
                <div aria-hidden="true" class="css-1ep9fjw"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <h1 class="jss108 jss113 jss195">Факультет</h1>
    <div>
      <ul class="jss222 jss223 jss191">
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Агрономический факультет</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Инженерный факультет</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Отдел аспирантуры и докторантуры</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Технологический факультет</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Управление международными научно-образовательными проектами</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Факультет ветеринарной медицины</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Факультет по заочному образованию и международной работе</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Факультет среднего профессионального образования</span></div><span class="jss71"></span></div>
        <div tabindex="0" class="jss61 jss226 jss229 jss233 jss234 jss192" role="button">
          <div class="jss237"><span class="jss108 jss115 jss240">Экономический факультет</span></div><span class="jss71"></span></div>
      </ul>
    </div>
  </div>
</div>

У вашей рекурсии...

const body = document.querySelectorAll('body');    

function recursy(element) {
  element.childNodes.forEach(node => {
    if (node.nodeName.match(/<\/?span[^>]*>/ig)) {
      console.log(node);
    } else {
      recursy(node);
    }
  });
}

recursy(body);

...четыре проблемы:

document.querySelectorAll('body') вернет специальную коллекцию (пусть и из одного элемента), у которого вообще нет childNodes. Сразу выдаст ошибку. Нужно заменить на document.querySelector("body") - чтобы взять первый такой элемент на странице. Или, в этом случае, просто document.body
Не у всех элементов есть childNodes (текстовые узлы, одиночные теги img, input). Надо проверять if (element.childNodes) { ...
match(/<\/?span[^>]*>/) никогда не пройдет проверку, потому что console.log( document.querySelector("span").nodeName ); // "SPAN" надо сравнивать if (node.nodeName == "SPAN")
Она задумана выполнять то же самое, что document.querySelectorAll("span");

БЛОГ НА HUSL

Как спарсить span на сайте

Ответы (1 шт):