분류 Nodejs

Puppeteer를 사용하여 웹 페이지에서 모든 텍스트를 가져오는 방법은 무엇입니까?

컨텐츠 정보

  • 조회 106 (작성일 )

본문

웹 스크래핑 API 사용자와 통신하는 동안 많은 사용자가 추가 데이터 조작을 위해 전체 웹 페이지 텍스트 추출을 사용한다는 것을 발견했습니다.


흥미롭습니다. 이러한 접근 방식은 텍스트에서 특정 텍스트 행을 선택하거나 RegExp를 사용하여 필요한 데이터 추출을 단순화하기 때문입니다.


NodeJS와 Puppeteer에서 전체 페이지의 텍스트를 추출하는 데 사용되는 몇 가지 방법을 살펴보겠습니다.


가장 일반적인 방법 - innerText 


첫 번째 방법은 가장 일반적인 방법이며 대부분의 Stackoverflow 답변에서 찾을 수 있습니다. 또한 한동안 웹 스크래핑 API에서 정확한 메커니즘을 사용했습니다.


innerText 속성을 사용한 추출을 기반으로 합니다. 숙소에 대한 자세한 정보는 여기에서 확인할 수 있습니다.


추출을 시연하기 위해 다음 HTML 콘텐츠와 함께 example.com 웹사이트를 사용할 것입니다.


<!doctype html>

<html>

<head>

    <title>Example Domain</title>


    <meta charset="utf-8" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

    body {

        background-color: #f0f0f2;

        margin: 0;

        padding: 0;

        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

        

    }

    div {

        width: 600px;

        margin: 5em auto;

        padding: 2em;

        background-color: #fdfdff;

        border-radius: 0.5em;

        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);

    }

    a:link, a:visited {

        color: #38488f;

        text-decoration: none;

    }

    @media (max-width: 700px) {

        div {

            margin: 0 auto;

            width: auto;

        }

    }

    </style>    

</head>


<body>

<div>

    <h1>Example Domain</h1>

    <p>This domain is for use in illustrative examples in documents. You may use this

    domain in literature without prior coordination or asking for permission.</p>

    <p><a href="https://www.iana.org/domains/example">More information...</a></p>

</div>

</body>

</html>


Puppeteer를 사용하여 이 웹사이트를 열고 텍스트를 추출해 보겠습니다.


const puppeteer = require('puppeteer');


(async () => {

    const browser = await puppeteer.launch({

        headless: true

    });

    const page = (await browser.pages())[0];

    await page.goto('http://example.com');

    const extractedText = await page.$eval('*', (el) => el.innerText);

    console.log(extractedText);


    await browser.close();

})();


이 코드 조각은 추출된 텍스트 데이터를 콘솔 출력에 기록합니다.


Example Domain


This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.


More information...



관찰할 수 있듯이 텍스트를 수동으로 선택하고 복사한 것과 동일한 결과를 받았습니다.


여전히 작업은 페이지에서 복사하여 붙여넣기와 동일하지 않으며 문제가 발생합니다. Bing과 같은 일부 사이트에서는 전체 텍스트를 추출할 수 없는 디스플레이 최적화를 사용합니다.


Bing 요청에 대해 제공된 코드 스니펫 및 count 매개변수를 30으로 설정하거나 다음 URL을 사용하여 시도할 수 있습니다. https://www.bing.com/search?q=scrapingant&count=30


또한 표준 수동 복사-붙여넣기 작업이 잘 작동하는 것으로 나타났습니다.


프로그래밍 방식으로 복사-붙여넣기를 해보자!


기본 방식 - 프로그래밍 방식으로 텍스트를 복사하여 붙여넣기 


이 방법은 실제로 복사-붙여넣기 작업을 수행하지 않습니다. 대신 Ctrl+A(모두 선택) 작업을 수행하고 선택 항목의 텍스트 내용을 반환합니다.


작동하도록 하기 위해 웹 페이지 컨텍스트 내에서 사용자 정의 JS도 실행합니다.


const puppeteer = require('puppeteer');


(async () => {

    const browser = await puppeteer.launch({

        headless: true

    });

    const page = (await browser.pages())[0];

    await page.goto('http://example.com');

    const extractedText = await page.$eval('*', (el) => {

        const selection = window.getSelection();

        const range = document.createRange();

        range.selectNode(el);

        selection.removeAllRanges();

        selection.addRange(range);

        return window.getSelection().toString();

    });

    console.log(extractedText);


    await browser.close();

})();



출력은 거의 동일합니다.


Example Domain

This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.


More information...


출력은 innerText 변형과 약간 다르지만 브라우저 창에서 선택-복사-붙여넣기 작업을 모의합니다. 또한 디스플레이 최적화를 사용하는 사이트에서 데이터를 추출할 수 있습니다.


타사 라이브러리 텍스트 추출 


일부 웹사이트는 Puppeteer(또는 Playwright와 같은 다른 브라우저 기반 도구)를 사용하여 반드시 스크랩할 수는 없지만 HTTP 클라이언트를 사용하여 검색하면 됩니다.


이러한 웹사이트에서 텍스트 콘텐츠를 추출하기 위해 HTML 구문 분석을 기반으로 하는 타사 라이브러리를 사용할 수 있습니다.


html-to-text를 만나보세요!


HTML 조작을 위한 강력한 스위스 칼인 htmlparser2를 기반으로 하는 Javascript 라이브러리입니다.


npm을 사용하여 html-to-text를 설치하려면 다음 명령을 실행하기만 하면 됩니다.


npm install html-to-text


최종 텍스트 스크레이퍼는 axios를 사용하여 HTML 콘텐츠를 가져오고 언급된 텍스트 추출 라이브러리를 사용하여 HTML에서 텍스트를 가져옵니다.


const axios = require('axios');

const { convert } = require('html-to-text');


(async () => {

    const response = await axios.get('http://example.com');

    const text = convert(response.data);


    console.log(text);

})();



코드가 브라우저(보기) 컨텍스트를 작동하지 않기 때문에 출력은 두 개의 첫 번째 변형과 다릅니다. 또한 라이브러리를 통해 링크 URL, 이미지 URL 등 웹사이트에서 더 많은 정보를 얻을 수 있습니다.


EXAMPLE DOMAIN


This domain is for use in illustrative examples in documents. You may use this

domain in literature without prior coordination or asking for permission.


More information... [https://www.iana.org/domains/example]


html-to-text에 대해 자세히 알아보기: https://www.npmjs.com/package/html-to-text


결론 


이 기사는 주요 웹 스크래핑 기술 중 하나인 텍스트 추출을 보여주었습니다. 웹상의 대부분의 정보가 텍스트 문자를 사용하여 전송되기 때문에 데이터 마이닝 동안 텍스트로 작업하는 것이 필수적입니다.


평소와 같이 다음 기사를 사용하여 웹 스크래핑 지식을 확장하는 것이 좋습니다.


Javascript를 사용한 웹 스크래핑(NodeJS) - 데이터 스크래핑을 위한 JavaScript 라이브러리

Javascript(Nodejs)로 이미지 다운로드 - NodeJS를 사용하여 파일을 다운로드하는 방법

HTML 구문 분석 라이브러리 - JavaScript - JavaScript HTML 구문 분석 라이브러리 개요


즐거운 웹 스크래핑, 데이터 손실을 방지하기 위해 웹 스크래핑 임시 진행 상황을 저장하는 것을 잊지 마세요 💾


출처 : https://scrapingant.com/blog/puppeteer-get-all-text