爬蟲2-BeautifulSoup (Python)

-

 

我們來談談BeautifulSoup,有關美麗的湯

快點跟上,來不及了

Beautiful Soup是一個Python庫，用於從HTML和XML文件中提取數據,甚麼你不知道HTML是甚麼,快來看看這篇文章吧 (晚點附上),簡單說他就是一個尋找HTML標籤的涵式庫

Beautiful Soup

來來來~~先附上Import的新鮮程式碼,並且把它寫在最上面喔

import scrapy
from bs4 import BeautifulSoup

我們這樣就可以使用BeautifulSoup啦,話不多說馬上來作範例:(這邊我們採取用金正恩領導人的維基來作範例)

from bs4 import BeautifulSoup
from scrapy.crawler import CrawlerProcess

class ExampleSpider(scrapy.Spider):
    name = 'example'
    allowed_domains = ['example.com']
    start_urls = ['<https://zh.wikipedia.org/wiki/%E9%87%91%E6%AD%A3%E6%81%A9>']

    def parse(self, response):
        content = response.body
        soup = BeautifulSoup(content, "html5lib")
        print(soup)   

#這邊放在程式碼最底下 好讓你可以在IDE直接執行可以看內容
process = CrawlerProcess()

process.crawl(ExampleSpider)

process.start()

利用VS code執行後在我們的終端機應該可以看這樣的內容(或是直接在終端機輸入 scrapy crawl example)

這部分的code是發出request然後把回傳的資料解析,而這些回傳解析是靠BeautifulSoup解析完後所print出來的

我們來打開google的devtool吧(也可以再chrome按下F12)



在上面的圖案你可以看到我紅框起來的資料是一樣的,而BeautifulSoup就是幫我們把回傳的資料解析成這樣,這樣你就可以針對Html的某個標籤進行萃取你所需要的資料

BeautifulSoup參數

def parse(self, response):
    content = response.body
    soup = BeautifulSoup(content, "html5lib")

在使用除了第一個參數通常都是既定的,我們來介紹一下第二個參數,我列了一張表在下面供給大家參考

    解析器使用方法優勢劣勢
    Python標準庫BeautifulSoup(markup, “html.parser”)
    • Python的內置標準庫
    • 執行速度適中
    • 文檔容錯能力強
    • Python 2.7.3 or 3.2.2)前 的版本中文檔容錯能力差
    lxml HTML 解析器BeautifulSoup(markup, “lxml”)
    • 速度快
    • 文檔容錯能力強
    • 需要安裝C語言庫
    lxml XML 解析器BeautifulSoup(markup, [“lxml”, “xml”])BeautifulSoup(markup, “xml”)
    • 速度快
    • 唯一支持XML的解析器
    • 需要安裝C語言庫
    html5libBeautifulSoup(markup, “html5lib”)
    • 最好的容錯性
    • 以瀏覽器的方式解析文檔
    • 生成HTML5格式的文檔
    • 速度慢

    下一篇文我們來講講如何確切使用BeautifulSoup吧

    說了這麼多,看完文章你做了甚麼?

    還不給我訂起來~~~(ʘ言ʘ╬)

    留言

    張貼留言

    這個網誌中的熱門文章

    Vue那些我踩過的坑(Vuex-TypeScript)

    -
    圖片
    在var來var去的同時雖然很方便,但也留下了許多技術債,在專案變大的同時未來是需要還的,但是在Vuex裡面使用TypeScript是非常痛苦的,因為VUEX本身的寫法是不支援TypeScript,這邊我示範一下如何重新定義store能夠好好低與typeScript結合吧 Store結構: type,是定義本身型別放置的地方 store │ index.ts │ type.ts │ └───rootComic actions.ts getters.ts index.ts mutation.ts type.ts index.d.ts: 我們可以從index底層Store的code,看到有個模板可以轉換成你想要的物件,裡面的 <S> 就是你定義的型別 export interface StoreOptions<S> { state?: S | (() => S); getters?: GetterTree<S, S>; actions?: ActionTree<S, S>; mutations?: MutationTree<S>; modules?: ModuleTree<S>; plugins?: Plugin<S>[]; strict?: boolean; devtools?: boolean; } Store定義: Step1: 開一個type.ts的檔案宣告我們 <S> 的型別,State本是個放資料的地方,要放資料的地方一定少不了interface,我們就以interface的方式來定義我們的state吧 export interface RootState { "rootmessage": string } Step2: 原本的寫法 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { } });
    閱讀完整內容

    Vue(Vue3取代 Vuex?)

    -
    圖片
      哎呀,以前在資料管理的部分都被Vuex綁死死,但是在typescript相對來說是很不友善的(我有寫一篇 for vuex在typescript 去定義),自從我用了vue3 的composition API及reactive 就直接使用了 yarn remove vuex ,在typescript的世界裡就是要清清楚楚,簡簡單單,甚麼模板轉換的才不需要呢 我們來創自己管資料的地方吧 type.ts: export interface InterComicsData extends InterGenre { id: string; mainIndex: string; mainIndex_name: string; descr: string; link: string; title: string; thumbnail_name: string; thumbnail_url: string; lastUpdateTime: string; createTime: string; genreDatas: InterGenre[]; } export interface InterGenre { id: string; rootComics_id: string; name: string; } export interface InterComics { comicDatas: InterComicsData[]; genreDatas: InterGenre[]; pageLimit: Number; } comics.ts: 我有做一個漫畫站,這邊是用來管理comics的地方 import Vue, { reactive, defineComponent, readonly } from "vue"; import { InterComicsData, InterComics, InterGenre } from "@/store/comics/type"; import axios from "axios"; import * as data
    閱讀完整內容

    前端優化效能-1(lazy-img)

    -
    圖片
    在Chrome底下可以使用在img DOM加入 loading="lazy" 就可以直接使用懶加載了,或者裝線上有的plugin也可以的(但是我喜歡自己來) <img src="image.png" loading="lazy" alt="..." /> 但IE跟Safari是不支援這樣的語法的,所以只好自己幹一個了,我們來用 IntersectionObserver吧(結果IE 也沒支援attribute QAQ) //註冊在讀取圖檔時要做的事情 window.addEventListener('load', () => {      const watcher = new IntersectionObserver(onEnterView) const elementArrary = document.getElementsByClassName('your_imgName'); for (let image of elementArrary) { watcher.observe(image) // 開始監視 } } //IntersectionObserver 的call back function onEnterView(entries: IntersectionObserverEntry[], observer: IntersectionObserver) { for (let entry of entries) { if (entry.isIntersecting) { // Element show on the loadImage(entry.target) // cancel watch observer.unobserve(entry.target) } } } // load img logic function loadImage(img: HTMLImageElement) { const removeMockup = (
    閱讀完整內容