Я пытаюсь просканировать некоторые веб-страницы с помощью javascript для сбора информации о иерархии контента. Я использую casperjs для выполнения обхода, который работает нормально до сих пор.
Информация, которую я хочу проанализировать, структурирована следующим образом:
<ul>
<a></a>
<li>
<h3>
<a>
Category
<span>Description for Category</span>
</a>
</h3>
<div>
<ul>
<li>
<a>SubCategory</a>
</li>
</ul>
</div>
</li>
</ul>
Но я хочу это сделать.
<ul>
<li>Category
<ul>
<li>SubCategory</li>
</ul>
</li>
</ul>
Я хочу использовать вышеуказанный html на другой веб-странице, поэтому в основном я буду писать его в файл из casperjs, чтобы затем копировать его в другой документ. Я сканирую, потому что это утомительная вещь, чтобы сделать вручную (90 страниц и много данных на странице).
Какой лучший способ деконструировать/проанализировать иерархию, а затем воссоздать ее? Оставайтесь внутри DOM и реструктурируйте с помощью JQuery? Вытащить его в древовидную структуру и перестроить позже?
Обратите внимание, что это конкретное решение и будет работать только для конкретного макета кода, который вы предоставили:
Я создал парсер в jQuery, который получает разметку HTML в текстовом поле и преобразует его в формат, который вы используете:
$(function(){
$("button").click(function(){
//Read in HTML
$("#parser").html($("textarea").val());
//Parse
var categories = $("#parser > ul").find("li h3 a");
$(categories).find("span").remove();
//Output result
var output = "<ul>\n";
for(var i = 0; i < categories.length; i++)
{
//Get subcategories for this category
var subCategories = $($(categories[i])).closest("h3").siblings("div").find("ul li a");
//Add markup to output
output += "\t<li>" + minimize($($(categories[i])).html()) + "\n\t\t<ul>\n";
for(var j = 0; j < subCategories.length; j++)
{
output += "\t\t\t<li>"+$($(subCategories[j])).html() + "</li>\n"
}
output += "\t\t</ul>\n\t</li>\n</ul>\n"
}
$("#result").html(output);
});
});
//Removes all white-space characters from the string.
function minimize(str)
{
return str.replace(/\s{2,}/g, '');
}
Это была большая работа и очень настроена. Как я сказал ранее, если вы посмотрите на различные селекторы, которые используются здесь, этот код очень адаптирован к этому конкретному макету кода.
Пример:
var categories = $("#parser > ul").find("li h3 a");
Это ищет элемент ul чуть ниже парсера, который содержит <a>s
внутри <h3>s
внутри <li>s
чтобы найти категории, а затем использует
$($(categories[i])).closest("h3").siblings("div").find("ul li a");
который ищет <h3>
над категорией <a>
которая имеет дочерний элемент <div>
с дочерними <div>
<ul><li><a></a></li></ul>
Так что если формат не таков:
<ul>
<li>
<h3>
<a>Category</a>
</h3>
<div>
<ul>
<li>
<a>Subcategory</a>
</li>
</ul>
</div>
</li>
</ul>
Это не будет работать.
Я закончил с этим подходом:
Мне было слишком сложно задуматься над модификацией DOM, как и с другими ответами. Было проще разбить его на несколько этапов, с хорошо структурированным javascript объектом посередине.
casper.getHTML()
, предполагая, что знаете, какая часть HTML вас интересует? или я здесь упускаю смысл?