Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2023, 02:03
Аватар для Ops
Ops Ops вне форума
Аспирант
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 33

Парсинг большого списка UL
Подскажите пожалуйста как сделать, парсинг на JS.

На странице есть ссылка с классом semiroot, в ссылочном тексте ("Пункт списка") - строка (на кириллице или латинице, могут быть цифры)

Код:
<a class="semiroot" href="/punkt-spiska/">Пункт списка</a>
И есть большой список ul с классом s-catalog-list, в нём, в некоторых пунктах li, есть вложенные div содержащие вложенные списки ul с классом s-sub-list.

Как JS взять за маску строку из ссылочного текста class="semiroot" (см. выше) пройтись по списку <ul class="s-catalog-list"> и в случае совпадения вывести вложенные div c ul или просто ul class="s-sub-list" с подпунктами.

Код:
<ul class="s-catalog-list">
...
<li class="">
<a href="/punkt-spiska/">Пункт списка</a>
<div>
<ul class="s-sub-list">

<li class="s-sub-item">
<a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-1/">Под-пункт списка 1</a>
</li>
<li class="s-sub-item">
<a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-2/">Под-пункт списка 2</a>
</li>
<li class="s-sub-item">
<a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-2/">Под-пункт списка 3</a>
</li>
<li class="s-sub-item"><a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-4/">Под-пункт списка 4</a>
</li>
</ul>
</div>
</li>
...
</ul>
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2023, 07:44
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,746

href="/punkt-spiska/ Подразумевает, что будет переход на новую страницу. Или что то другое?
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2023, 09:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

Сообщение от Ops
вывести ... ul class="s-sub-list" с подпунктами.
<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        section {
            border: 1px solid red;
            margin: 2px;
        }

        ul {
            border: 1px solid #008000;
        }
    </style>
</head>

<body>
    <a class="semiroot" href="/punkt-spiska/">Пункт списка</a>
    <ul class="s-catalog-list">
        ...
        <li class="">
            <a href="/punkt-spiska/">Пункт списка</a>
            <div>
                <ul class="s-sub-list">
                    <li class="s-sub-item">
                        <a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-1/">Под-пункт списка 1</a>
                    </li>
                    <li class="s-sub-item">
                        <a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-2/">Под-пункт списка 2</a>
                    </li>
                    <li class="s-sub-item"><a class="s-sub-header" href="test">test</a>
                    </li>
                    <li class="s-sub-item">
                        <a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-2/">Под-пункт списка 3</a>
                    </li>
                    <li class="s-sub-item"><a class="s-sub-header" href="/punkt-spiska/pod-punkt-spiska-4/">Под-пункт списка 4</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="">
            <a href="/punkt-spiska/">Пункт списка</a>
            <div>
                <ul class="s-sub-list">test</ul>
            </div>
        </li>
    </ul>
    <h3>section</h3>
    <section></section>
    <script>
        let patern = document.querySelector('.semiroot').getAttribute('href');
        let sel = `[href*="${patern}"]`;
        let uls = Array.from(document.querySelectorAll('ul.s-catalog-list ul.s-sub-list')).filter(ul => ul.querySelector(sel));
        document.querySelector('section').append(...uls.map(ul => {
            ul = ul.cloneNode(true);
            ul.querySelectorAll('ul.s-sub-list > li.s-sub-item').forEach(li => li.querySelector(sel) || li.remove())
            return ul
        }))
    </script>
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2023, 23:15
Аватар для Ops
Ops Ops вне форума
Аспирант
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 33

рони,
Интегрировал, работает, как всегда в яблочко. Спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 17.11.2023, 23:26
Аватар для Ops
Ops Ops вне форума
Аспирант
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 33

Только заметил один момент, работает как мне надо, но под ссылочным текстом я подразумевал текст внутри тегов <a href...>ссылочный текст</a> (он по науке так вроде и называется, поправьте если я не прав), а скрипт выпарсивает по адресу документа URL, т.е. по самой ссылке. Но это так - лирика! И возможно по URL-у даже правильнее.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание списка из значений, сохраненных в localStorage OlegGrishko Элементы интерфейса 2 14.12.2021 19:13
Не работает скрипт отображения списка Konstantine Javascript под браузер 3 18.03.2013 06:00
Динамическое добавление выпадающего списка В IE stepennwolf Internet Explorer 3 04.11.2011 17:36
Парсинг большого кол-ва хтмл zeloras Общие вопросы Javascript 1 15.03.2011 19:04
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40