Как сделать парсер на javascript
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Есть девочки как девочки, есть мальчики как мальчики, есть сайтики как сайтики, но странички их обманщики. В целях сохранить информацию, от автоматизированного сбора, многие ресурсы пытаются защитить ее. Один из таких способов - вывод информации на странице через JavaScript. При получении такой страницы в 1С, JavaScript не успевает вывести необходимые данные, и в 1с получаем практически пустую страницу. В статье приведу пример разработки, для парсинга таких страниц, без регистрации и смс.
Для реализации данного парсинга нам необходимо:
0. google chrome. Да, нам нужен браузер, открываться он не будет) Все будет происходить в командной строке, но однако сам браузер нам необходим) Я пользовался хромом, и драйверы качал для него.
1. 1с (шутеечка =) ). Проверял на 8.2.19.102, 8.3.15.1656
2. ChromeDriver (искать тут)
3.1 pyinstaller
3.2 Selenium
4. Скрипт для связки 1с и ChromeDriver . Напишем сами на Python, и скомпилируем в exe(parser.exe).
Суть работы такая - запускаем из 1с parser.exe, в параметрах передаем ссылку на страницу для парсинга, и путь к файлу, в который сохраним нашу страницу, для парсинга из 1с, и еще кое какие данные. Т.е. фактически мы скачаем эту страницу с уже выведенными данными и будем в 1с работать с ее локальной версией.
Рис.1 - Общие шаги
1. Работа парсера была протестированна на 1с 8.2 и 8.3.
Я передаю одну ссылку, и жду в ответ только одну страницу. Это не очень хорошо, так как лучше передавать весь массив ссылок, и обрабатывать их в скрипте, чтобы не вызывать скрипт на каждую страницу. Рассмотрим именно такой вариант. Но и в в таком режиме можно распараллелить работу - пока скрипт скачивает страницу, 1с обрабатывает предыдущий результат.
2. WebDriver - это инструмент с открытым исходным кодом для автоматического тестирования веб-приложений во многих браузерах. Он предоставляет возможности для навигации по веб-страницам, ввода данных пользователем, выполнения JavaScript и многого другого. ChromeDriver - это автономный сервер, который реализует стандарт W3C WebDriver . ChromeDriver доступен для Chrome на Android и Chrome на рабочем столе (Mac, Linux, Windows и ChromeOS).
Рис.2 - Переменные окружения для Python
3.2 Selenium - собственно он будет делать всю грязную работу с js. Установка:
4. Parser.exe
Вот мой примера кода парсинга:
Сохраним его с именем parser.py. Чтобы компилировать его в exe необходимо применить для него команду:
В папке со скриптом появится distr. И там появится Parser.exe.
Собственно его мы и будем запускать из 1С. На этом вроде и все. Надеюсь, ничего не упустил.
Большой интерес пользователей к статье Учимся парсить сайты с библиотекой PHP Simple HTML DOM Parser показал, что тема парсеров очень актуальна. В продолжении темы, хочу рассказать, как можно парсить сайты используя JavaScript и всю мощь библиотеки jQuery, взамен Simple HTML DOM Parser.
Нет, мы не будем использовать для обработки js, какой-нибудь серверный интерпретатор, весь парсинг и обработка данных будет происходить на Вашей машине, в Вашем браузере. Браузером будет Google Chrome, а парсер мы реализуем в виде расширения Google Chrome Extension.
Почему Google Chrome, трудно сказать, самым верным ответом наверное будет: "А почему бы и нет?!". Не сомневаюсь, что тоже самое можно будет сделать и для Opera. Однако, эта статья не про написание расширений для браузера( хотя возможно Вы почерпнете для себя и здесь, что-то новое), а про то, как писать client-side парсеры на JavaScript.
Также хочу рассказать про преимущества, которые дает такой подход к написанию парсера.
Во первых: jQuery и JavaScript в целом обладает фантастическим набором методов для работы с DOM документа, Simple HTML DOM Parser тихо курит в сторонке. Навигация по дереву DOM браузер априори обрабатывает очень быстро, это собственно его нативный функционал.
Второе: по планете давным давно шагает WEB 2.0. Для тех кто в танке: веб второй версии подразумевает динамически меняющийся контент сайта. AJAX или просто замена определенного участка страницы через JS сводит на нет работу любого php парсера. Проиллюстрирую на примере:
Полагаю Вы догадываетесь, что увидит написанный на php парсер, загрузивший данную страницу, и тупо проверяющий содержание тега body.
Использование браузера в качестве парсер-машины позволяет, обмануть сайт, и выполнить подобные скрипты, получив результирующую страницу.
Итак для начала напишем расширение для Chrome типа Hello World. а затем будем наращивать его функционал. Далее я буду называть наше расширение — приложением, так как расширение увеличивает функционал самого браузера, либо добавляет какие-то фичи к сайту, мы же пишем настоящее приложение, которое работает на базе браузера.
Создайте пустую папку с каким-нибудь внятным названием на латинице. Я назвал парсер xdParser, так обзовем и папку.
В ней создадим два файла main.html и manifest.json, такого содержания:
Самым интересным параметром для нашего парсера здесь будет permissions, дело в том, что по умолчанию ajax не позволяет cross-domain запросы. Прописав нужный домен в массив permissions, мы сообщаем Google Chrome'у, о том что наш ajax будет использовать кросс-доменные запросы. Если же в массив добавить "", то ajax-запросы будут разрешены для любого домена.
Чтобы новое приложение не затерялось в безликой толпе, закиньте в созданную папку набор каких-нибудь иконок, к примеру эти. Иконки должны быть png, иначе они работают не везде. Наверно глюк.
Теперь приложение надо установить, кликаем на панели браузера по иконке с гаечным ключем (Настройки и управление Google Chrome), затем Инструменты → Расширения, ставим в самом верху галку Режим разработчика
Далее кликаем Загрузить распакованное расширение. и указываем путь к вышеназванной папке. Если manifest.json валиден, то приложение установится и мы увидим его среди прочих.
Открываем новую вкладку, в ней переходим на слайд Приложения, и видим там свое.
С Hello World разобрались, теперь напишем наш первый парсер JavaScript на Google Chrome Extensions.
Как видно из кода, необходимо создать две подпапки js и css. В js закинуть два файла jquery-1.7.2.min.js и main.js
Теперь сделаем что-нибудь посложнее. Возьмем мой пример с парсингом фото из Яндекса при попмощи Simple HTML DOM
не забывайте перезагружать Ваше приложение в расширениях Google Chrome, там же где Вы его устанавливали. Под каждым расширением, в том числе и Вашем есть ссылка Перезагрузить
Иначе изменения внесенные в manifest.json не вступят в силу.
Далее изменим parserGo:
Как видите я ввел еще одну функцию requrs:
Здесь fs — это экземпляр класса fileStorage для работы с файловой системой. Для его инициализации Вам понадобится файл fileStorage.js и в самом начале main.js прописать создание экземпляра этого класса:
То, как он работает, это тема отдельной статьи, отмечу лишь одни грабли в его использовании: запись следующего файла на диск должна производится только после завершения записи предыдущего. Это очень важно учитывать в асинхронных приложениях, коим и является наш парсер. Поэтому метод loadRemoteFile , одним из своих параметров принимает callback функцию, которая выполняется только по окончании записи файла на диск, и рекурсивно вызывает requrs.
По работе с файлами рекомендую почитать цикл статей по работе с файловой системой в JavaScript Работа с файлами в JavaScript, Часть 1: Основы
В результате файлы с картинками будут аккуратно сложены в папку виртуальной файловой системы Хрома, у меня это папка лежит тут: C:\Users\Leroy\AppData\Local\Google\Chrome\User Data\Default\File System, ее название может быть разным и создается самим Хромом. Повторюсь, что это лишь виртуальная файловая система, и картинок с расширением *.jpg Вы здесь не найдете. Все файлы лежат с восьмизначными числовыми именами, начиная от 00000000, без расширения. Но если открыть их какой-нибудь программой для просмотра изображений, они прекрасно откроются. А в браузере на вкладке с нашим приложением мы увидим прекрассную Джессику:
остальные примеры из парсинг фото из Яндекса при попмощи Simple HTML DOM переделайте сами, это не сложно. Мы же рассмотрим более реальный пример парсера.
DOM Inspector Google Chrome показывает нам, что все ссылки находятся так:
Отлично, у нас есть названия категорий и их адреса. Теперь необходимо выяснить сколько в каждой категории страниц с объявлениями, и перебрать их все. Для этого найдем на странице ссылку на последнюю страницу в подкатегории. Первая проблема с которой нам придется тут столкнутся, это то, что эта ссылка не имеет уникального идентификатора. Однако мы видим, что следующая за ней ссылка на Следующую страницу имеет id=nextLink, значит найти нужную нам ссылку можно так:
Также выясняется, что страницы работают без ЧПУ и у каждой подкатегории есть числовой идентификатор, он нам понадобится поэтому получим его из href найденной ссылки при помощи регулярного выражения:
Итак у нас есть id категории cat[2] и общее количество страниц maxpage. Теперь перебираем их все с 1 до maxpage. Делать это циклом используя асинхронные запросы нецелесообразно, поэтому используем рекурсивную функцию function requrs(catid, fullCount, tik, url), где catid — это id категории, fullCount — общее количество страниц в категории, tik — текущий номер страницы, url — ЧПУ адрес подкатегории.
Осталось распарсить полученные страницы на объявления, загрузить страницу каждого объявления и выдернуть из нее нужный нам телефон. Это сделает функция analizeSite. Каждое объявление можно найти на странице подкатегории таким образом: div.adsInfo a, а на странице с объявлением телефон можно найти регулярным выражением:
Результат мы увидим в консоли JavaScript, увидеть которую можно нажав ctrl+shift+j
Парсинг сайтов (web scraping) можно использовать для создания сводки новостных лент, пополнения базы email-адресов, сравнения цен и других целей. В нашей статье мы поговорим о парсинге через API сайтов — данный подход отличается простотой, ведь парсинг всей страницы не требуется. В большинстве случаев этот подход весьма неплох. Но стоит учесть, что он может не сработать, если владелец сайта установит специальные настройки.
Как это функционирует?
Алгоритм следующий: — парсер посылает веб-странице get-запрос; — парсер получает данные в виде HTML/XML; — осуществляется извлечение данных в желаемом формате.
Чтобы загружать файлы через консоль нам подойдёт утилита Wget, однако вы вправе выбрать и другой инструмент на своё усмотрение.
Настройка проекта
Итак, приступим: 1. Выполняем установку Node.js, которая поставляется совместно с npm (менеджером пакетов). 2. Выполняем создание новой папки, пусть это будет webscrap, но можете использовать и любое другое имя. 3. Переходим в эту папку командой cd webscrap . 4. Осуществляем запуск из консоли командой npm init , чтобы создать файл package.json. 5. Выполняем npm i osmosis --save — это обеспечивает установку пакета для парсинга. Дополнительных зависимостей не будет (только от обработчика и селектора). 6. Открываем package.json, потом создаём новый стартовый скрипт — он нам нужен для последующего выполнения команды npm start .
Вот как будет в итоге выглядеть наш package.json:
Теперь потребуется создать файл index.js, в котором и будем работать.
Парсинг информативного заголовка в Google
Приведём базовый пример для ознакомления с пакетом и запуском первого Node-скрипт. Давайте поместим нижеследующий код в файл index.js, а потом запустим консольную команду npm start . Эта команда выведет заголовок veb-страницы:
Теперь давайте разберём, что выполняют методы. Первый (get) получает veb-страницу в сжатом формате. Второй (set) выбирает элемент заголовка, который представлен в виде css3-селектора. Третий (data с console.log) осуществляет вывод. Кроме того, set принимает в качестве аргумента строки.
Как получить релевантные результаты в Google?
Представьте, что вы желаете получить результаты по такому ключевому слову, как analytics. Что делаем:
Как увеличить число страниц при релевантном поиске?
Как парсить адреса эл. почты с Shopify?
Теперь соберём email-адреса и названия приложений, перемещаясь последовательным образом посредством метода .follow . А потом помечаем нужные селекторы в консоли:
Вышеописанный код можем комбинировать с методом .paginate — это позволит полностью собрать весь контент (правда, вас могут и заблокировать).
Итак, давайте сохраним данные в формате json:
На этом всё, вы же продолжайте экспериментировать. И оставляйте комментарии!
Заключение
Сегодня мы разобрали три способа того , ка к происходит парсинг JSON при помощи Java. Парсинг — это довольно распространенный процесс, который применяется повсеместно и никак не зависит от используемого языка. Java не является самы м популярны м язык ом для парсинга, однако и на нем предусмотрены инструменты для данного действия. Парсинг часто связан с веб-разработкой, когда пользователи парсят определенную информацию с разных веб-сайтов на свой сайт. Для такого парсинга в основно м используется язык программирования Python.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Читайте также: