Парсинг большого списка UL
Подскажите пожалуйста как сделать, парсинг на JS.
На странице есть ссылка с классом semiroot, в ссылочном тексте ("Пункт списка") - строка (на кириллице или латинице, могут быть цифры) Код:
<a class="semiroot" href="/punkt-spiska/">Пункт списка</a>Как JS взять за маску строку из ссылочного текста class="semiroot" (см. выше) пройтись по списку <ul class="s-catalog-list"> и в случае совпадения вывести вложенные div c ul или просто ul class="s-sub-list" с подпунктами. Код:
<ul class="s-catalog-list"> |
href="/punkt-spiska/ Подразумевает, что будет переход на новую страницу. Или что то другое?
|
Цитата:
<!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>
|
рони,
Интегрировал, работает, как всегда в яблочко. Спасибо! |
Только заметил один момент, работает как мне надо, но под ссылочным текстом я подразумевал текст внутри тегов <a href...>ссылочный текст</a> (он по науке так вроде и называется, поправьте если я не прав), а скрипт выпарсивает по адресу документа URL, т.е. по самой ссылке. Но это так - лирика! :) И возможно по URL-у даже правильнее.
|
| Часовой пояс GMT +3, время: 04:37. |