Форум

Ops · #1 (**permalink**) 17.11.2023, 02:03

Подскажите пожалуйста как сделать, парсинг на 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>

Спасибо.

voraa · #2 (**permalink**) 17.11.2023, 07:44

href="/punkt-spiska/ Подразумевает, что будет переход на новую страницу. Или что то другое?

рони · #3 (**permalink**) 17.11.2023, 09:19

Сообщение от 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>

Ops · #4 (**permalink**) 17.11.2023, 23:15

рони,
Интегрировал, работает, как всегда в яблочко. Спасибо!

Ops · #5 (**permalink**) 17.11.2023, 23:26

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

И возможно по URL-у даже правильнее.

Форум

Справочник

Discord чат

Курсы javascript