Как разобрать DOM (REACT)

Я пытаюсь очистить данные с веб-сайта. На сайте используется Facebook React. Таким образом, исходный код, который я могу проанализировать с помощью Jaunt, полностью отличается от кода, который я вижу при проверке элементов с помощью инспектора Chrome.

Я очень мало знаю обо всем этом, но, проведя некоторое исследование, я думаю, что это связано с DOM, а не с исходным кодом. Мне нужен способ получить этот код DOM, поскольку исходный источник не содержит ничего, что я хочу, но у меня нет туманной идеи, с чего начать (даже прочитав здесь много ответов).

Здесь приведен пример одной страницы, которую я хочу очистить. Например, чтобы очистить описание, я хотел бы получить то, что находится между тегом:

<span class="light-font extended-card-description list-group-item">Example description....</span>

Но, как вы можете видеть, этот элемент появляется только тогда, когда вы " Осмотреть элемент", а не когда я просто просматриваю источник страницы.

Мой вопрос к вам, гениям здесь, как я могу захватить этот код DOM и начать очищать те элементы, которые я действительно хочу?

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

Спасибо вам заблаговременно!

ОТВЕТЫ

Ответ 1

ReactJS, как и многие другие библиотеки/фреймворки Javascript, использует код на стороне клиента (Javascript) для визуализации окончательного HTML. Это означает, что когда вы, Jaunt или ваш браузер извлекаете исходный код HTML с сервера, он еще не содержит конечный код, который пользователь увидит. Браузеру необходимо запустить программу Javascript, содержащуюся на странице, чтобы создать окончательный контент, который вы хотите очистить.

Моим любимым инструментом для такого рода работ является CasperJS

Это (или, скорее, инструмент PhantomJS, который использует CasperJS) является браузером без браузера, что означает версию Webkit (например, Chrome или Safari), которая была лишена всего графического интерфейса (окна, кнопки, меню). Что осталось инструмент, который можно запускать с терминала или с вашей Java-программы. Он не будет показывать никаких окон на экране, но он будет получать веб-страницы, на которые вы его просите; запустите любой Javascript, который они содержат; а затем отвечать на ваши команды, такие как "нажмите на эту ссылку", "дайте мне этот текст", "снимите скриншот" и т.д.

Начнем с простого примера ReactJS:

Мы хотим очистить текст "Hello John", но если вы посмотрите на простой источник HTML (Ctrl + U или Alt + Ctrl + U), вы его не увидите, С другой стороны, если вы откроете консоль в своем браузере и используете следующий селектор, вы получите текст:

> document.querySelector('#helloExample .playgroundPreview').textContent
"Hello John"

Вот простой CasperJS script, чтобы сделать то же самое:

var casper = require("casper").create();

casper.start("http://facebook.github.io/react/index.html", function() {
    this.echo(this.fetchText("#helloExample .playgroundPreview"));
});

casper.run();

Вы можете сохранить его как hello.js и выполнить его с помощью casperjs hello.js с терминала или использовать эквивалентный код Java Runtime.getRuntime().exec(...)

Вот лучший script, который позволяет избежать загрузки изображений и сторонних ресурсов (таких как кнопка Facebook, кнопка Twitter, Google Analytics и т.д.), сокращая время загрузки наполовину. Он также добавляет шаг waitForSelector, поэтому мы не пытаемся извлечь текст до того, как у ReactJS появилась возможность его создать.

var casper = require("casper").create({
    pageSettings: {
        loadImages: false
    }
});

casper.on('resource.requested', function(requestData, request) {
    if (requestData.url.indexOf("http://facebook.github.io/") != 0) {
        request.abort();
    }
});

casper.start("http://facebook.github.io/react/index.html", function() {
    this.waitForSelector("#helloExample .playgroundPreview", function() {
        this.echo(this.fetchText("#helloExample .playgroundPreview"));
    });
});

casper.run();

Как установить CasperJS

У меня были некоторые проблемы с очисткой ReactJS и другими современными страницами Javascript со старыми версиями PhantomJS и CasperJS, поэтому я рекомендую установить PhantomJS 2.0 и последнюю версию CasperJS из GitHub.

Для PhantomJS вы можете просто загрузить официальный пакет 2.0.

Для CasperJS, поскольку это Python script, вы должны иметь возможность проверить последнюю фиксацию из GitHub и ссылку bin/casperjs на ваш PATH. Здесь script для Linux или Mac OS X:

> git clone git://github.com/n1k0/casperjs.git
> cd casperjs
> ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs

Вы также можете прокомментировать строку печати Warning PhantomJS v2.0 ... из вашего файла bin/bootstrap.js.