Пишем парсер на JavaScript | QA

Поделиться
HTML-код
  • Опубликовано: 10 ноя 2024

Комментарии • 110

  • @sonopro9920
    @sonopro9920 3 года назад +3

    Как всегда магия)) магия с безграничными возможностями!!!👏

  • @kotikvacia9970
    @kotikvacia9970 5 лет назад +19

    Спасибо вам за ваши курсы !

  • @aleksandrstaetskiy5687
    @aleksandrstaetskiy5687 4 года назад +9

    Просто топовейший видос. И отличный пример использования рекурсии :)

  • @windcrack8404
    @windcrack8404 Год назад +1

    Спасибо большое. Видео очень сильно помогло. Мой учитель по js опять выручил!

  • @Интернетобразование-о1и

    Офигенное объяснение!!!

  • @placid3495
    @placid3495 5 лет назад +44

    А я думал парсеры сложно)

    • @Maxim9575
      @Maxim9575 7 месяцев назад

      потому что это не парсер, а обход DOM дерева, ничего общего с настоящими парсерами тут нет

    • @DenisK-to8lf
      @DenisK-to8lf 2 месяца назад

      @@Maxim9575 А как по Вашему можно спарсить данные с сайта?

    • @Maxim9575
      @Maxim9575 2 месяца назад

      @@DenisK-to8lf разберитесь с определением что такое парсер.
      Ну а так парсинг подразумевает получение исходного кода и затем его анализ, который приведет к конкретному результату.
      Браузер по вашему как вам отображает страницу? Правильно, использовав DOM-дерево для визуализации содержимого. А перед этим он получает исходный код страницы, а затем производит разбор в 2 этапа: лексический анализ исходного текста, а затем синтаксический анализ. И результатом этих двух этапов будет DOM-дерево.

  • @АдильМиерманов
    @АдильМиерманов Год назад +1

    это идеальный урок, спасибо огромное

  • @ivanrussui4126
    @ivanrussui4126 3 года назад

    Крутяк Иван, было полезно. Благодарю.

  • @drotikdrotik5941
    @drotikdrotik5941 4 года назад +1

    Лучший преподаватель, учусь у него на Юдеми отличный курс по Джаваскрипту!
    Всем его рекомендую)

    • @coldym
      @coldym 4 года назад

      Как прогресс? Нашел работу?

  • @gennadyga2257
    @gennadyga2257 4 года назад +3

    Иван спасибо за объяснение! учусь на твоем курсе.

  • @denisbielishev
    @denisbielishev 4 года назад +17

    Интересно было бы увидеть как реальный парсер сделать, со вложенными страницами по типу интернет магазина

    • @SerhiyLytvynenko
      @SerhiyLytvynenko 2 года назад +2

      В чем проблема? Когда парсишь все данные , находишь нужную ссылку, отправляешь get-запрос по этому адресу и парсишь уже эти данные

  • @Vitaliy-1C
    @Vitaliy-1C 4 года назад +1

    Очень грамотно объяснил! Спасибо.

  • @yarlykanov
    @yarlykanov 3 месяца назад

    Отличный урок! Спасибо. Покажите, пжлста, как парсить сообщения, которые пришли на емайл от определённого отправителя?

  • @nshebeko
    @nshebeko 5 лет назад +3

    Спасибо Иван, круто было бы если это показать на реальных проектах, в практическом применении, например берём готовый парсер и разбираем как он работает. Хочется понимать зачем это мы всё делаем, то бишь мотивы. Понятно что заголовки кому то нужно спарсить, но кому? и где?

    • @campfireschool
      @campfireschool  5 лет назад +3

      Окей. Приведу реальный кейс пока на словах)
      У нас была задача с одного большого веб-ресурса вытащить всю информацию о компаниях, которые на нем размещены. Страниц и компаний было очень много, с каждой вручную вытаскивать название, логотип, контактные данные и прочее очень долго, муторно и бесполезно :)
      Вот для такой задачи мы и использовали парсер, по структуре чуть сложнее, тк затрагивалась серверная часть.

    • @campfireschool
      @campfireschool  5 лет назад

      @@FaineLito1055 Практически невозможно) Все что попадает в браузер можно вытащить)

    • @campfireschool
      @campfireschool  5 лет назад

      @@FaineLito1055 Главное, чтобы конечному пользователю это не навредило)) А так самое противное - это изображения. Из них текст не вытащить, увы)

  • @hopmnc
    @hopmnc 4 года назад +2

    гуд джоб, спасибо.

  • @PavelPavel-vh3fs
    @PavelPavel-vh3fs 4 года назад +1

    Спасибо за крутой и понятный урок

  • @zachfenton608
    @zachfenton608 2 года назад

    Спасибо большое

  • @oleksiimarchenko2177
    @oleksiimarchenko2177 4 года назад

    Спасибо большое за Ваши курсы, очень доходчиво! Советую всем своим друзьям которые хотят войти в ІТ))

  • @СергейЛогинов-у4ъ6к
    @СергейЛогинов-у4ъ6к Месяц назад

    А можно ли как-то парсить данные сайта, не открывая его страницу на стороне клиента, но при этом отфильтрованный результат парсинга возвращать клиенту?

  • @AlexM-ox7io
    @AlexM-ox7io 2 месяца назад

    Не проще ли на ноде библиотекой Puppeteer собрать все что тебе нужно указывая классы?))

  • @ЭзизК
    @ЭзизК 4 года назад

    Круто✊

  • @kharkiv_inres5127
    @kharkiv_inres5127 4 года назад +2

    Значет хорошо разобратся и можно брать заказы на парсер страници!

  • @MrDmi3i
    @MrDmi3i 2 года назад

    есть сайт со спортивными играми... там периодически появляются игры на которые я бы хотел попасть как участник, но постоянно не успеваю попасть в лимит игроков (например - ближайшая игра баскетбол, уровень новичок... ). Как реализовать механизм чтобы мне например в телегу приходило оповещение что на сайте появилась дата игры для регистрации?

  • @web-bp6lj
    @web-bp6lj 2 года назад

    Друзья, пожалуйста, объясните: для чего нужен локальный сервер в работе парсера?
    Какова его роль? Благодарю.

  • @aleksandrstaetskiy5687
    @aleksandrstaetskiy5687 4 года назад +1

    Канал просто кладезь годноты :)

  • @stasonnl777
    @stasonnl777 4 года назад +4

    Здравствуйте. А как парсить с другого сайта? Например я хочу спасрсить с другого сайта заголовки и разместить их на своем сайте.

    • @sergey5806
      @sergey5806 4 года назад +1

      Разобрался как это сделать?

    • @Moskalineludy
      @Moskalineludy 3 года назад

      fetch

  • @userman6193
    @userman6193 Год назад

    Good! Thanks!)

  • @wickedtorpedo75
    @wickedtorpedo75 4 года назад +2

    30 строк самого гениального кода, спасибо за урок

  • @aximas778
    @aximas778 3 года назад +1

    Парсер отличный, но вот только я пытался его попробовать как вы на хабре консоль выдала undefined
    Пересмотрел код везде всё ок на локалке работает а в других местах получаю undefined

  • @СергейКомыза
    @СергейКомыза 4 года назад +4

    Спасибо за труд! А есть у вас курс по углубленному изучению парсинга на js? Забирать инфу с нужных сайтов и т.д?

  • @ashercon1337
    @ashercon1337 5 лет назад +2

    Сейчас прохожу ваш курс по js на udemy, хотел сказать спасибо за доходчивое объяснение тем.
    Вопрос по видео (ещё не посмотрел до конца) мы сможем парсить только страницу, к которой мы подключили наш js скрипт ?
    то есть мы не сможем дать парсеру url другого сайта и ждать от него данных?

    • @campfireschool
      @campfireschool  5 лет назад

      Спасибо) Как я и говорил ближе к концу ролика - да, этот простенький скрипт будет работать только на одной странице. Для более сложного взаимодействия нам уже понадобится серверная часть. В любом случае - смысл особо не изменится)

    • @ashercon1337
      @ashercon1337 5 лет назад

      Ivan Petrychenko получается для создания парсера других сайтов нужно использовать node js ? Знаете ли вы node, будет ли курс по нему ?

    • @campfireschool
      @campfireschool  5 лет назад +2

      Ilya Tyurin да, в следующем году планирую записать)

    • @ДаниилЕлин-ж1п
      @ДаниилЕлин-ж1п 4 года назад +2

      @@campfireschool Спасибо за курс по js)

  • @sergey5806
    @sergey5806 4 года назад +1

    Круто как всегда)) Интересно было бы посмотреть на реализацию nodejs приложения))
    Ты так круто поясняешь, что кажется все настолько простым.

    • @campfireschool
      @campfireschool  4 года назад

      Спасибо)

    • @dmitriystoyanov933
      @dmitriystoyanov933 4 года назад +6

      да, парень реально профессионал. Печально, что нам всем кажется простым когда смотрим, а сесть и самим с нуля написать - начинается просто обсиралово и ни строчки из себя выдавить не получается))

  • @Каналдлясаморазвития-я1я

    Вместо сервера можно использовать node js и express

  • @L0w1y
    @L0w1y 3 года назад

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

  • @CalmDepth
    @CalmDepth 3 года назад

    интересно. правильно я понимаю,что такой конструкцией shadow-dom не выпотрошить?

  • @АлександрАлександр-х6б3ы

    Добрый день! попробовал использовать данный парсер не на локальном сервере, а через tamper monkey. вот только слушалка DOMContentLoaded не работает, а работает window.addEventListener('load', () => {});

  • @ВячеславИванов-д1р

    Можно ли разместить скрипт на Firebase? Есть необходимость получать обновления определенной страницы в телеграм на телефоне. То есть чтобы получать обновления без открытого браузера и даже отключенного компьютера. Делать запросы периодически и проверять не появился ли новый пост. Если появился каким то образом отправлять этот пост сообщением в телеграм. Есть у кого-то идеи насчет этого?

  • @sergeishmelev8000
    @sergeishmelev8000 2 года назад

    А можно создать подобный парсер для соц сетей, чтобы вытаскивал количество постов, подписчиков и просмотров и лайков?

  • @oldzas
    @oldzas 3 года назад +2

    Мне не хватило хождение по пагинатору и открывание страниц и только потом парсинг

    • @vadicus6534
      @vadicus6534 3 года назад +1

      Я тоже об этом думаю. как пройти весь сайт если мы парсим только на одной странице.

  • @ondrui
    @ondrui 3 года назад

    Иван, спасибо за ролик, очень интересная тема была.
    Я попробовал этот скрипт на странице из курса вашего "
    Полный курс по JavaScript + React - с нуля до результата
    " FOOD - там мы динамически на страницу часть контента добавляем (меню, например) - и эту часть парсер не видит! Не подскажите, как обойти эту проблему? Я добавил скрипт в метод then и получил данные из меню, но если доступа нет к коду страницы как быть?

  • @igorstarodubtsev8037
    @igorstarodubtsev8037 3 года назад

    Не могли бы видосик запилить как спарсить с сайтов ссылки на фильмы, постеры, названия фильмов для создания плейлистов

  • @JuliaDemchenko-c3q
    @JuliaDemchenko-c3q 3 года назад

    Здравствуйте! А можно показать на примере Инстаграм. Допустим есть страници профилей и с них нужно получить информацию ( количество подписчиков, подписок и публикаций) с сохранением этих данных в Excel? Возможно ли так сделать, буду очень благодарна 😊

  • @Freedom_Code
    @Freedom_Code 4 года назад

    Иван, знаю , что не по теме вопрос,, здравствуйте, подскажите пожалуйста , каким образом можно в react.native парсить файлы .txt и возможно ли это. Единственное, что пришло на ум -- это подключать библиотеку fs из node.js , но оправдано ли это?

  • @ЯрославВлас-б6т
    @ЯрославВлас-б6т Год назад

    У меня вопрос. А как подключить данный скрипт на другие сайты автоматически?

  • @dimualdos
    @dimualdos 3 года назад

    Хочется узнать про создание бота в телеграм

  • @muborizDev
    @muborizDev 4 года назад

    спасибо

  • @nikolaydemchenko6741
    @nikolaydemchenko6741 4 года назад

    Видео понравилось, только не могу понять момент с рекурсией в начале, почему в условии проверяется количество потомков входящего элемента, а не его потомка? Ведь по факту в боди в любом случае потомков больше одного, значит функция будет запускаться для каждого, даже если у него нет своих потомков, и не получится ли так, что на том у кого 1 потомок, рекурсия не будет запущена, хотя у самого потомка будет много своих потомков? Не правильнее ли просто проверять if(node.childNodes){} ? Или там какая-то другая логика? Кодю недавно, может чего не знаю, объясните пожалуйста добрые люди)

  • @EvgenichTalagaev
    @EvgenichTalagaev 2 года назад

    Вот бы пример с парсингом реального сайта в сети.

  • @dmitriy2502
    @dmitriy2502 2 года назад

    Здравствуйте! Спасибо за урок! Подскажите, а если результат ни отправлять на сервер а просто писать в текстовый файл на компьютер? Как это реализовать? Спасибо!

    • @sergey9627
      @sergey9627 2 года назад

      Тоже есть задача, собирать информацию в excel файл, вам удалось найти ответ ?

    • @dmitriy2502
      @dmitriy2502 2 года назад

      @@sergey9627 Пока оставили реализацию, решение ни нашли. Но по похожей тематике были ролики внутри которых есть реализация, но вот к сожалению прошло более 3 мес, ни помню где было.

  • @itconstructor1570
    @itconstructor1570 3 года назад

    Добрый день, а как курсы валют с сайта автоматически парусить.? Всегда ведь в консоль лесть со своим кодом не будешь

    • @campfireschool
      @campfireschool  3 года назад +2

      Обычно курсы валют отдаются по открытому API . Например minfin.com.ua/developers/api/

    • @vadicus6534
      @vadicus6534 3 года назад

      @@campfireschool так платить надо, а можно просто парсить?)))

  • @ИгорьКиселев-ч7ь
    @ИгорьКиселев-ч7ь 4 года назад

    Ппивет Ivan ! В JavaScript я еще только начинаю учиться. Из твоего объяснения все понятно кроме того, что такое ноды . Может я чего то не понимаю? Объясни пожалуйста откуда они берутся! Спасибо

    • @campfireschool
      @campfireschool  4 года назад

      Игорь Киселев это DOM-узлы на странице) не элементы, а именно узлы.
      Кроме элементов сюда входят переносы строк, изображения и тд.

    • @ИгорьКиселев-ч7ь
      @ИгорьКиселев-ч7ь 4 года назад

      @@campfireschool скажи пожалуйста где я могу почитать про ноды вводное.

    • @campfireschool
      @campfireschool  4 года назад

      @@ИгорьКиселев-ч7ь learn.javascript.ru/dom-nodes
      Например, вот здесь.

  • @supfiger
    @supfiger 3 года назад

    я один подумал, что видео началось в скорости 1.5x? :))

    • @MrLuckfinder
      @MrLuckfinder 3 года назад

      Прохожу сейчас его курсы на юдеми. Единственные курсы, которые приходится смотреть на 0,75 скорости. И то, не всегда успеваю.

  • @AliaksandrHrankin
    @AliaksandrHrankin 4 года назад

    Спасибо за урок.
    А если я хочу, чтобы мне куда-то сохранялись результаты парсинга?

    • @campfireschool
      @campfireschool  4 года назад

      Вы можете отправлять результаты на свой VPS сервер и там их сохранять в любом удобном формате.
      Т.е. php/node.js/... будут записывать результат в json, txt... если говорить просто)

    • @AliaksandrHrankin
      @AliaksandrHrankin 4 года назад

      @@campfireschool это понятно. щас вот гуглю, как принимать его и обрабатывать в файле php. Думаю, как преобразовать это в csv

    • @AliaksandrHrankin
      @AliaksandrHrankin 4 года назад +1

      @@campfireschool что-то никак не могу справиться с CORS. Написал простой парсер и простой php. На локальном сервере локальный же сайт парсит нормально и сохраняет json файл. Положил php файл на хостинг. Со своего сайта сохраняет файл, а с других не хочет. Не пойму, что и как настроить. Все, что нагуглил, не могу разобраться

  • @pashoki6880
    @pashoki6880 3 года назад

    А вообще есть разница на каком языке писать парсер, многие пишут его на питоне ?

    • @campfireschool
      @campfireschool  3 года назад

      Да, будет зависеть его «мощность» и среда работы. Поэтому python по этим параметрам подходит очень хорошо

    • @pashoki6880
      @pashoki6880 3 года назад

      @@campfireschool подскажите, а сильно ли js в этом плане уступает ?

    • @campfireschool
      @campfireschool  3 года назад

      @@pashoki6880 если использовать node.js - то нет

    • @pashoki6880
      @pashoki6880 3 года назад

      @@campfireschool Подскажите, а как реализовать возможность автоматического парсера, когда не нужно заходить и вставлять в консоль скрипт, чтобы отслеживать динамически изменяющуюся информацию на странице автоматически

  • @ruslan2676
    @ruslan2676 4 года назад

    Как сделать так, чтобы скрипт стягивал инфу, например, с альбома Вконтакте (описания под фото)? И при этом не нужно было каждый раз заходить ручками это в консоль писать?
    В идеале сделать так, чтобы конфигурация выглядела таким образом:
    1. Вставил ссылку.
    2. Прописал какие ноды цеплять.
    А дальше отправить себе на сайт в таблицу.
    Так же интересует как это настроить чтобы обновлялось хотя-бы раз в сутки или по нажатию
    Хочу научится это делать, куда копать?)

    • @campfireschool
      @campfireschool  4 года назад +2

      Ruslan Anisimov добрый день. Все это делается уже с помощью бэк-технологий. Нужен сервер и соответствующие скрипты, написанные на node.js, php, ...

  • @zizzxiii2714
    @zizzxiii2714 3 года назад

    выводит только {id: 101} и все

  • @vitaliylufter8765
    @vitaliylufter8765 3 года назад +1

    Ну как бы парсер, но как бы и не совсем, какой-то детский. Вопрос: зачем нам парсить свой хтмл? А как получить сторонний хтмл? Как ходить по страницам сайта который парсим? Как обойти блокировки и защиту от неделательной активности? Как парсить не на своём компе а в режиме online, на сервере? Как подключить прокси, как косить под реального пользователя(это к вопросу про обход защиты)? Как капчу разгадывать автоматически? Парсер это сложная система, а не вот это вот.

    • @campfireschool
      @campfireschool  3 года назад +1

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

  • @o_opedro4044
    @o_opedro4044 3 года назад

    👌 -👍 ...

  • @namirGO
    @namirGO 2 года назад

    Дякую

  • @paljm345
    @paljm345 3 года назад

    Блин, а вот как дальше работать с полученной информацией?? Она выводится только в консоль.лог. Как мне закинуть ее в переменную и дальше обрабатывать??

  • @Alex-yh7pr
    @Alex-yh7pr 4 года назад

    18:15 6 объектов

  • @РамизМирзаев-х5к
    @РамизМирзаев-х5к 5 лет назад +1

    🤓

  • @ticheroi
    @ticheroi 4 года назад +1

    recursy что такое?)) recursion мб?)

  • @bdg5242
    @bdg5242 4 года назад

    Парсер по моему сайту работает, но вот когда решил также попробовать на хабре как ты в видосе. Получается ошибка: Uncaught SyntaxError: Identifier 'body' has already been declared
    at :1:1

    • @bdg5242
      @bdg5242 4 года назад

      как я понял видать какие то сайты блокируют это, а какие то нет. На вк вот работает

    • @alexg1431
      @alexg1431 4 года назад

      Просто переименуй const body например в const body12123 и всё. Тебе ошибка говорит что такая константа уже есть.

  • @stylizestylish973
    @stylizestylish973 3 года назад

    6:30

  • @forgiveness_denied
    @forgiveness_denied 5 лет назад +2

    шось може по бек енду

  • @vladpronin5033
    @vladpronin5033 4 года назад +3

    Пожалуйста, перестань коверкать английские слова на свой лад, произношение у тебя не самое лучшее. Звучит отвратительно, после пяти минут просто замутил. Поработай над собой, мб подписчиков прибавится

  • @ashur1k
    @ashur1k Год назад

    xpath для слабаков! Только цикл по всем узлам! Только хардкор!
    1) Открываем "DevTools"
    2) Переходим на вкладку "Console"
    3) Выполняем в консоли следующее выражение: $x('//h1 | //h2 | //h3 | //h4 | //h5')
    4) ПРОФИТ

  • @ibrohimbobojonov6197
    @ibrohimbobojonov6197 3 года назад

    Спасибо