CSS 선택기를 사용하여 HTML에서 HTML/텍스트 노드 선택/추출

Question

HTML 페이지 콘텐츠를 변수로 검색하기 위해 fetch를 사용하는 노드 스크립트를 작성한다고 가정해 보겠습니다.

이제 이러한 유형의 콘텐츠에 대한 CSS 선택기가 있습니다. 이것을 사용하여 CSS 선택기가 인식하는 HTML 및/또는 텍스트 콘텐츠를 추출하려면 어떻게 해야 합니까?

활용할 수 있는 기존 도구/패키지가 있는 경우 두 가지 수준으로 답변해 주세요.

1. 순수한 CSS 선택자 기반
2. jQuery 기반 도구

Answer 1

Node.js의 CSS 선택기로 식별된 HTML/텍스트 콘텐츠를 추출하려면 Cheerio, jsdom 또는 Puppeteer와 같은 다양한 패키지를 사용할 수 있습니다. 다음은 CSS 선택기를 사용하여 순수 CSS 선택기 기반 및 jQuery 기반 도구의 콘텐츠를 추출하는 방법에 대한 예입니다.

순수한 CSS 선택자 기반: Cheerio는 HTML을 구문 분석하고 CSS 선택기를 사용하여 데이터를 추출할 수 있는 빠르고 유연한 패키지입니다. Cheerio를 사용하여 CSS 선택기를 통해 콘텐츠를 추출하는 방법은 다음과 같습니다.

으아아아

jQuery 기반 도구: jQuery 구문을 선호하는 경우 jQuery 또는 JSDOM과 같은 패키지를 사용할 수 있습니다. 다음은 jQuery를 사용한 예입니다.

으아아아

두 예제 모두 먼저 패키지(Cheerio 또는 JSDOM)를 사용하여 HTML 콘텐츠를 로드한 다음 CSS 선택기를 사용하여 원하는 콘텐츠를 선택합니다. 마지막으로 text() 메서드를 사용하여 선택한 요소의 텍스트를 추출합니다.