Node.js, cheerio로 HTML DOM 파씽하기

라이브러리 설치

예제에 사용할 라이브러리를 아래와 같이 프로젝트 루트에서 설치한다.

# 프로젝트 초기화
$ npm init -y

# request, cheerio, voca 라이브러리 설치 및 적용
$ npm i request request-promise cheerio voca --save

• request, request-promise는 HTTP 클라이언트 라이브러리이다. 웹사이트의 HTML을 로드할 목적으로 사용할 것이다.
• cheerio는 오늘의 주인공이다. JQuery와 거의 동일한 기능의 HTML DOM 파씽 기능을 제공한다.
• voca는 문자열 가공을 위한 라이브러리이다. 문자열 속에서 HTML 태그를 제거하고 트리밍 등의 기능을 제공한다.

샘플 HTML

아래는 예제를 시연할 샘플 HTML이다. 루리웹 메인 페이지(www.ruliweb.com)을 로드했을 때 출력되는 종합게시판의 글 목록이다.

<ul class="bottom_list col col_6">
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286724">
      [축구] [에레디비시] '네덜란드 전설' 카윗, 현역 은퇴                         </a>
      <span class="num_reply">[1]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286723">
      [정보] [MD할리우드]DC ‘저스티스 리그’ 대규모 재촬                        </a>
      <span class="num_reply">[0]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286722">
      [정치] SBS가 또 사고쳤네요.                        </a>
      <span class="num_reply">[13]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286721">
      [사회] 리우올림픽 부채 423억원…공적자금 투입 불가                        </a>
      <span class="num_reply">[2]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286720">
      [사회] 美언론, 사드 비난 중국 랩그룹 뮤비 주목…가사                        </a>
      <span class="num_reply">[5]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286719">
      [정치] "오야붕인줄…" 문희상 특사 본 일본인들의 반응                        </a>
      <span class="num_reply">[9]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286718">
      [정보] [엑's 이슈] 대세 세븐틴vs괴물 아이콘, 주목할                        </a>
      <span class="num_reply">[1]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286717">
      [정치] [단독] 국가안보실, 새 정부에 자료 안 넘겨 "별                        </a>
      <span class="num_reply">[8]</span>
   </li>
   <li class="bottom_list_item">
      <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286716">
      [정치] 군 통수권자 등장에 국방부 직원 환호성에 사인                         </a>
      <span class="num_reply">[1]</span>
   </li>
</ul>

샘플 HTML 파씽 예제

const request = require('request-promise')
const cheerio = require('cheerio')
const v = require('voca')

request('http://ruliweb.com').then(function (html) {

    // Cheerio 오브젝트 생성
    const $ = cheerio.load(html)

    // 셀렉터 캐시로 Cheerio 오브젝트 생성
    const $articleList = $('div#total_userinfo ul.bottom_list')

    ...
})

• Cheerio의 기능은 jQuery와 거의 동일하다. 최초에 load() 메써드로 HTML을 불러오면 Cheerio 오브젝트가 생성된다.

• Cheerio의 대부분의 메써드는 체이닝을 통해 가공된 Cheerio 오브젝트를 반환한다. 반환된 오브젝트에 이름을 붙일 때는 $를 사용하여 구분한다.

글 목록 획득

전체 HTML에서 글 목록만 확보하려면 아래와 같이 셀렉터를 사용하여 cheerio 오브젝트를 획득한다.

const $articleList = $('div#total_userinfo ul.bottom_list')

console.log($articleList.length)
console.log($articleList.html())

결과는 아래와 같다.

9

<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286724">
   [축구] [에레디비시] '네덜란드 전설' 카윗, 현역 은퇴                         </a>
   <span class="num_reply">[1]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286723">
   [정보] [MD할리우드]DC ‘저스티스 리그’ 대규모 재촬                        </a>
   <span class="num_reply">[0]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286722">
   [정치] SBS가 또 사고쳤네요.                        </a>
   <span class="num_reply">[13]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286721">
   [사회] 리우올림픽 부채 423억원…공적자금 투입 불가                        </a>
   <span class="num_reply">[2]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286720">
   [사회] 美언론, 사드 비난 중국 랩그룹 뮤비 주목…가사                        </a>
   <span class="num_reply">[5]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286719">
   [정치] "오야붕인줄…" 문희상 특사 본 일본인들의 반응                        </a>
   <span class="num_reply">[9]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286718">
   [정보] [엑's 이슈] 대세 세븐틴vs괴물 아이콘, 주목할                        </a>
   <span class="num_reply">[1]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286717">
   [정치] [단독] 국가안보실, 새 정부에 자료 안 넘겨 "별                        </a>
   <span class="num_reply">[8]</span>
</li>
<li class="bottom_list_item">
   <a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286716">
   [정치] 군 통수권자 등장에 국방부 직원 환호성에 사인                         </a>
   <span class="num_reply">[1]</span>
</li>

첫번째 글 제목 획득

앞서 획득한 글 목록은 9개의 li 엘러먼트를 가진다. 아래와 같이 첫번째 글의 글 제목을 획득한다.

const $articleInfo = $articleList.childrun().eq(0)

console.log($articleInfo.html())

• eq() 메써드를 사용하여 9개의 cheerio 오브젝트 배열 중 1번째 오브젝트를 획득한다. 결과는 아래와 같다.

<a class="subject deco" href="http://bbs.ruliweb.com/news/board/1005/read/2286724">
[축구] [에레디비시] '네덜란드 전설' 카윗, 현역 은퇴                         </a>
<span class="num_reply">[1]</span>

글 제목 문자열 획득

앞서 획득한 li 엘러먼트에서 글 제목 문자열만 획득한다.

let title = $articleInfo.text()
title = v.replaceAll(title, '\t', '')
title = v.replaceAll(title, '\r\n', '')
title = v.trim(title)

console.log(title)

• text() 메써드는 문자열만 추출한다.
• Voca의 replaceAll() 메써드를 사용하여 탭 문자와 개행 문자를 제거하고 trim() 메써드로 트리밍된 글 제목을 획득한다.

[정보] 봉준호 '옥자' 칸영화제 수상 적신호…심사위원[6]

참고 글

• Ruquest-Promise
• Cheerio
• Voca