Разбор структуры / иерархии HTML и воссоздание его в другой форме с помощью JavaScript

0

Я пытаюсь просканировать некоторые веб-страницы с помощью 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? Вытащить его в древовидную структуру и перестроить позже?

Теги:
casperjs

2 ответа

1
Лучший ответ

Обратите внимание, что это конкретное решение и будет работать только для конкретного макета кода, который вы предоставили:

Я создал парсер в 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 = "&lt;ul&gt;\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&lt;li&gt;" + minimize($($(categories[i])).html()) + "\n\t\t&lt;ul&gt;\n";

             for(var j = 0; j < subCategories.length; j++)
             {
                 output += "\t\t\t&lt;li&gt;"+$($(subCategories[j])).html() + "&lt/li&gt;\n"
             }

            output += "\t\t&lt;/ul&gt;\n\t&lt;/li&gt;\n&lt;/ul&gt;\n"
        }

        $("#result").html(output);
    });

});

//Removes all white-space characters from the string.
function minimize(str)
{
    return str.replace(/\s{2,}/g, '');
}

JSFiddle


Это была большая работа и очень настроена. Как я сказал ранее, если вы посмотрите на различные селекторы, которые используются здесь, этот код очень адаптирован к этому конкретному макету кода.

Пример:

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>

Это не будет работать.

  • 0
    Разве вы не можете использовать casper.getHTML() , предполагая, что знаете, какая часть HTML вас интересует? или я здесь упускаю смысл?
  • 0
    @rusln Конечно, вы можете использовать это, чтобы получить html так же, как я смог сделать $ ("textarea"). val (), однако смысл кода в том, чтобы проанализировать HTML и извлечь важные части. Я делаю это, беря HTML и помещая его в скрытый div, где я могу затем использовать jQuery, чтобы выбрать правильные части HTML и преобразовать их в дерево DOM, которое ищет OP.
Показать ещё 1 комментарий
0

Я закончил с этим подходом:

  1. Очистите теги от существующего веб-сайта и соберите их в массив, вложенный в объект javascript.
  2. Запись их с помощью JSON.stringify в файл
  3. Загрузите их на новую страницу как объекты Javascript и создайте структуру ul/li с рекурсивной функцией, которая пересекла объект javascript.

Мне было слишком сложно задуматься над модификацией DOM, как и с другими ответами. Было проще разбить его на несколько этапов, с хорошо структурированным javascript объектом посередине.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню