Пишем парсер на JavaScript | QA
HTML-код
- Опубликовано: 22 сен 2024
- В этом ролике я отвечу на один из вопросов подписчиков и мы создадим свой небольшой парсер html-страниц. Все полученные данные мы будем отправлять на сервер при помощи fetch API.
Ссылки:
JSONPlaceholder - jsonplaceholde...
Одни из лучших и доступных курсов по JavaScript, верстке (html/css), React, Wordpress и многому другому вы найдете на campfire-schoo...
Ссылки:
Мой инстаграм - / petrychenko_ivan
Телеграм-канал: t.me/petrychen...
Телеграм-канал с общением: t.me/+U1yEc5iG...
Спасибо вам за ваши курсы !
Просто топовейший видос. И отличный пример использования рекурсии :)
Как всегда магия)) магия с безграничными возможностями!!!👏
Спасибо большое. Видео очень сильно помогло. Мой учитель по js опять выручил!
Офигенное объяснение!!!
А я думал парсеры сложно)
потому что это не парсер, а обход DOM дерева, ничего общего с настоящими парсерами тут нет
@@Maxim9575 А как по Вашему можно спарсить данные с сайта?
@@DenisK-to8lf разберитесь с определением что такое парсер.
Ну а так парсинг подразумевает получение исходного кода и затем его анализ, который приведет к конкретному результату.
Браузер по вашему как вам отображает страницу? Правильно, использовав DOM-дерево для визуализации содержимого. А перед этим он получает исходный код страницы, а затем производит разбор в 2 этапа: лексический анализ исходного текста, а затем синтаксический анализ. И результатом этих двух этапов будет DOM-дерево.
Иван спасибо за объяснение! учусь на твоем курсе.
это идеальный урок, спасибо огромное
Интересно было бы увидеть как реальный парсер сделать, со вложенными страницами по типу интернет магазина
В чем проблема? Когда парсишь все данные , находишь нужную ссылку, отправляешь get-запрос по этому адресу и парсишь уже эти данные
Крутяк Иван, было полезно. Благодарю.
Очень грамотно объяснил! Спасибо.
Лучший преподаватель, учусь у него на Юдеми отличный курс по Джаваскрипту!
Всем его рекомендую)
Как прогресс? Нашел работу?
30 строк самого гениального кода, спасибо за урок
Спасибо Иван, круто было бы если это показать на реальных проектах, в практическом применении, например берём готовый парсер и разбираем как он работает. Хочется понимать зачем это мы всё делаем, то бишь мотивы. Понятно что заголовки кому то нужно спарсить, но кому? и где?
Окей. Приведу реальный кейс пока на словах)
У нас была задача с одного большого веб-ресурса вытащить всю информацию о компаниях, которые на нем размещены. Страниц и компаний было очень много, с каждой вручную вытаскивать название, логотип, контактные данные и прочее очень долго, муторно и бесполезно :)
Вот для такой задачи мы и использовали парсер, по структуре чуть сложнее, тк затрагивалась серверная часть.
@@FaineLito1055 Практически невозможно) Все что попадает в браузер можно вытащить)
@@FaineLito1055 Главное, чтобы конечному пользователю это не навредило)) А так самое противное - это изображения. Из них текст не вытащить, увы)
гуд джоб, спасибо.
Спасибо за крутой и понятный урок
Отличный урок! Спасибо. Покажите, пжлста, как парсить сообщения, которые пришли на емайл от определённого отправителя?
Спасибо большое за Ваши курсы, очень доходчиво! Советую всем своим друзьям которые хотят войти в ІТ))
Круто как всегда)) Интересно было бы посмотреть на реализацию nodejs приложения))
Ты так круто поясняешь, что кажется все настолько простым.
Спасибо)
да, парень реально профессионал. Печально, что нам всем кажется простым когда смотрим, а сесть и самим с нуля написать - начинается просто обсиралово и ни строчки из себя выдавить не получается))
Канал просто кладезь годноты :)
Спасибо)
Спасибо большое
Значет хорошо разобратся и можно брать заказы на парсер страници!
Спасибо за труд! А есть у вас курс по углубленному изучению парсинга на js? Забирать инфу с нужных сайтов и т.д?
Увы, но пока нет :(
Круто✊
Не проще ли на ноде библиотекой Puppeteer собрать все что тебе нужно указывая классы?))
Good! Thanks!)
Спасибо
Мне не хватило хождение по пагинатору и открывание страниц и только потом парсинг
Я тоже об этом думаю. как пройти весь сайт если мы парсим только на одной странице.
Здравствуйте. А как парсить с другого сайта? Например я хочу спасрсить с другого сайта заголовки и разместить их на своем сайте.
Разобрался как это сделать?
fetch
есть сайт со спортивными играми... там периодически появляются игры на которые я бы хотел попасть как участник, но постоянно не успеваю попасть в лимит игроков (например - ближайшая игра баскетбол, уровень новичок... ). Как реализовать механизм чтобы мне например в телегу приходило оповещение что на сайте появилась дата игры для регистрации?
Вместо сервера можно использовать node js и express
Здравствуйте! А можно показать на примере Инстаграм. Допустим есть страници профилей и с них нужно получить информацию ( количество подписчиков, подписок и публикаций) с сохранением этих данных в Excel? Возможно ли так сделать, буду очень благодарна 😊
Не могли бы видосик запилить как спарсить с сайтов ссылки на фильмы, постеры, названия фильмов для создания плейлистов
Сейчас прохожу ваш курс по js на udemy, хотел сказать спасибо за доходчивое объяснение тем.
Вопрос по видео (ещё не посмотрел до конца) мы сможем парсить только страницу, к которой мы подключили наш js скрипт ?
то есть мы не сможем дать парсеру url другого сайта и ждать от него данных?
Спасибо) Как я и говорил ближе к концу ролика - да, этот простенький скрипт будет работать только на одной странице. Для более сложного взаимодействия нам уже понадобится серверная часть. В любом случае - смысл особо не изменится)
Ivan Petrychenko получается для создания парсера других сайтов нужно использовать node js ? Знаете ли вы node, будет ли курс по нему ?
Ilya Tyurin да, в следующем году планирую записать)
@@campfireschool Спасибо за курс по js)
Парсер отличный, но вот только я пытался его попробовать как вы на хабре консоль выдала undefined
Пересмотрел код везде всё ок на локалке работает а в других местах получаю undefined
интересно. правильно я понимаю,что такой конструкцией shadow-dom не выпотрошить?
Вот бы пример с парсингом реального сайта в сети.
Друзья, пожалуйста, объясните: для чего нужен локальный сервер в работе парсера?
Какова его роль? Благодарю.
Иван, спасибо за ролик, очень интересная тема была.
Я попробовал этот скрипт на странице из курса вашего "
Полный курс по JavaScript + React - с нуля до результата
" FOOD - там мы динамически на страницу часть контента добавляем (меню, например) - и эту часть парсер не видит! Не подскажите, как обойти эту проблему? Я добавил скрипт в метод then и получил данные из меню, но если доступа нет к коду страницы как быть?
А можно создать подобный парсер для соц сетей, чтобы вытаскивал количество постов, подписчиков и просмотров и лайков?
Иван, знаю , что не по теме вопрос,, здравствуйте, подскажите пожалуйста , каким образом можно в react.native парсить файлы .txt и возможно ли это. Единственное, что пришло на ум -- это подключать библиотеку fs из node.js , но оправдано ли это?
А как сделать так, чтобы он брал данные с внешней страницы. Например я хочу сделать чтобы релизы гитхаба подгружал и показывал когда я открываю Index.html
Добрый день! попробовал использовать данный парсер не на локальном сервере, а через tamper monkey. вот только слушалка DOMContentLoaded не работает, а работает window.addEventListener('load', () => {});
Видео понравилось, только не могу понять момент с рекурсией в начале, почему в условии проверяется количество потомков входящего элемента, а не его потомка? Ведь по факту в боди в любом случае потомков больше одного, значит функция будет запускаться для каждого, даже если у него нет своих потомков, и не получится ли так, что на том у кого 1 потомок, рекурсия не будет запущена, хотя у самого потомка будет много своих потомков? Не правильнее ли просто проверять if(node.childNodes){} ? Или там какая-то другая логика? Кодю недавно, может чего не знаю, объясните пожалуйста добрые люди)
Можно ли разместить скрипт на Firebase? Есть необходимость получать обновления определенной страницы в телеграм на телефоне. То есть чтобы получать обновления без открытого браузера и даже отключенного компьютера. Делать запросы периодически и проверять не появился ли новый пост. Если появился каким то образом отправлять этот пост сообщением в телеграм. Есть у кого-то идеи насчет этого?
Ну как бы парсер, но как бы и не совсем, какой-то детский. Вопрос: зачем нам парсить свой хтмл? А как получить сторонний хтмл? Как ходить по страницам сайта который парсим? Как обойти блокировки и защиту от неделательной активности? Как парсить не на своём компе а в режиме online, на сервере? Как подключить прокси, как косить под реального пользователя(это к вопросу про обход защиты)? Как капчу разгадывать автоматически? Парсер это сложная система, а не вот это вот.
Именно поэтому я и проговорил в начале, что это довольно плюшевый парсер, который сделан по просьбам студентов на чистом js :)
Дякую
я один подумал, что видео началось в скорости 1.5x? :))
Прохожу сейчас его курсы на юдеми. Единственные курсы, которые приходится смотреть на 0,75 скорости. И то, не всегда успеваю.
Хочется узнать про создание бота в телеграм
👌 -👍 ...
18:15 6 объектов
🤓
Спасибо за урок.
А если я хочу, чтобы мне куда-то сохранялись результаты парсинга?
Вы можете отправлять результаты на свой VPS сервер и там их сохранять в любом удобном формате.
Т.е. php/node.js/... будут записывать результат в json, txt... если говорить просто)
@@campfireschool это понятно. щас вот гуглю, как принимать его и обрабатывать в файле php. Думаю, как преобразовать это в csv
@@campfireschool что-то никак не могу справиться с CORS. Написал простой парсер и простой php. На локальном сервере локальный же сайт парсит нормально и сохраняет json файл. Положил php файл на хостинг. Со своего сайта сохраняет файл, а с других не хочет. Не пойму, что и как настроить. Все, что нагуглил, не могу разобраться
Здравствуйте! Спасибо за урок! Подскажите, а если результат ни отправлять на сервер а просто писать в текстовый файл на компьютер? Как это реализовать? Спасибо!
Тоже есть задача, собирать информацию в excel файл, вам удалось найти ответ ?
@@sergey9627 Пока оставили реализацию, решение ни нашли. Но по похожей тематике были ролики внутри которых есть реализация, но вот к сожалению прошло более 3 мес, ни помню где было.
Добрый день, а как курсы валют с сайта автоматически парусить.? Всегда ведь в консоль лесть со своим кодом не будешь
Обычно курсы валют отдаются по открытому API . Например minfin.com.ua/developers/api/
@@campfireschool так платить надо, а можно просто парсить?)))
Ппивет Ivan ! В JavaScript я еще только начинаю учиться. Из твоего объяснения все понятно кроме того, что такое ноды . Может я чего то не понимаю? Объясни пожалуйста откуда они берутся! Спасибо
Игорь Киселев это DOM-узлы на странице) не элементы, а именно узлы.
Кроме элементов сюда входят переносы строк, изображения и тд.
@@campfireschool скажи пожалуйста где я могу почитать про ноды вводное.
@@ИгорьКиселев-ч7ь learn.javascript.ru/dom-nodes
Например, вот здесь.
Как сделать так, чтобы скрипт стягивал инфу, например, с альбома Вконтакте (описания под фото)? И при этом не нужно было каждый раз заходить ручками это в консоль писать?
В идеале сделать так, чтобы конфигурация выглядела таким образом:
1. Вставил ссылку.
2. Прописал какие ноды цеплять.
А дальше отправить себе на сайт в таблицу.
Так же интересует как это настроить чтобы обновлялось хотя-бы раз в сутки или по нажатию
Хочу научится это делать, куда копать?)
Ruslan Anisimov добрый день. Все это делается уже с помощью бэк-технологий. Нужен сервер и соответствующие скрипты, написанные на node.js, php, ...
У меня вопрос. А как подключить данный скрипт на другие сайты автоматически?
выводит только {id: 101} и все
А вообще есть разница на каком языке писать парсер, многие пишут его на питоне ?
Да, будет зависеть его «мощность» и среда работы. Поэтому python по этим параметрам подходит очень хорошо
@@campfireschool подскажите, а сильно ли js в этом плане уступает ?
@@pashoki6880 если использовать node.js - то нет
@@campfireschool Подскажите, а как реализовать возможность автоматического парсера, когда не нужно заходить и вставлять в консоль скрипт, чтобы отслеживать динамически изменяющуюся информацию на странице автоматически
шось може по бек енду
Python server
recursy что такое?)) recursion мб?)
6:30
Блин, а вот как дальше работать с полученной информацией?? Она выводится только в консоль.лог. Как мне закинуть ее в переменную и дальше обрабатывать??
Парсер по моему сайту работает, но вот когда решил также попробовать на хабре как ты в видосе. Получается ошибка: Uncaught SyntaxError: Identifier 'body' has already been declared
at :1:1
как я понял видать какие то сайты блокируют это, а какие то нет. На вк вот работает
Просто переименуй const body например в const body12123 и всё. Тебе ошибка говорит что такая константа уже есть.
Пожалуйста, перестань коверкать английские слова на свой лад, произношение у тебя не самое лучшее. Звучит отвратительно, после пяти минут просто замутил. Поработай над собой, мб подписчиков прибавится
xpath для слабаков! Только цикл по всем узлам! Только хардкор!
1) Открываем "DevTools"
2) Переходим на вкладку "Console"
3) Выполняем в консоли следующее выражение: $x('//h1 | //h2 | //h3 | //h4 | //h5')
4) ПРОФИТ
спасибо