Wordpress

워드프레스 HTML 콘텐츠에서 필요한 정보만 추출하는 4가지 방법

0

HTML 콘텐츠에서 필요한 정보만 추출하는 것은 웹 개발에서 매우 중요한 작업입니다. 특히, 워드프레스와 같은 플랫폼에서 제공하는 다양한 데이터를 다룰 때, 우리는 많은 정보를 필요에 따라 가공하고 사용할 수 있어야 합니다. 이번 글에서는 JavaScript를 이용해 워드프레스 API로부터 제공되는 HTML 형식의 콘텐츠에서 원하는 정보만 파싱하는 다양한 방법에 대해 알아보겠습니다. 쉽고 명확한 방법을 통해 여러분이 데이터 처리에 어려움을 느끼지 않도록 도와드리겠습니다.

1. DOMParser를 사용한 HTML 파싱

DOMParser란 무엇일까요?

DOMParser는 브라우저 환경에서 HTML 문자열을 DOM(Document Object Model)으로 변환하는 도구입니다. 이를 통해 우리는 HTML 코드를 마치 웹 페이지의 요소들처럼 접근하고, 필요한 정보를 추출할 수 있습니다. 예를 들어, 워드프레스의 `p` 태그로 감싸진 텍스트만을 선택해보고 싶다면 DOMParser가 유용합니다.

DOMParser 사용 예시

function parseContent(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  
  // 'p' 태그 내부의 텍스트 추출
  const paragraphs = doc.querySelectorAll('p');
  const parsedText = Array.from(paragraphs).map(p => p.textContent).join('\n');
  
  return parsedText;
}

const rawHtml = '<div><p>첫 번째 문장입니다.</p><p>두 번째 문장입니다.</p></div>';
const result = parseContent(rawHtml);
console.log(result);  // "첫 번째 문장입니다.\n두 번째 문장입니다."

위 코드에서는 `DOMParser`로 HTML 문자열을 변환한 후, `p` 태그 내부의 텍스트만 추출합니다. 간단한 HTML 구조를 파싱할 때 DOMParser는 매우 강력한 도구입니다.

2. 정규식을 사용한 간단한 파싱

정규식으로 원하는 태그만 추출하기

정규식(Regular Expression)은 특정 패턴에 맞는 텍스트를 추출하거나 변환할 때 유용한 도구입니다. 특히 간단한 HTML 문자열에서 특정 태그나 내용만을 추출하는 작업에는 정규식이 효과적입니다. 다만, 너무 복잡한 HTML 구조에서는 정규식이 잘못된 결과를 반환할 수 있으니 주의가 필요합니다.

정규식을 이용한 태그 추출 예시

function stripTags(htmlString, tag) {
  const regex = new RegExp(`<${tag}[^>]*>(.*?)</${tag}>`, 'gi');
  const matches = [];
  let match;
  
  while ((match = regex.exec(htmlString)) !== null) {
    matches.push(match[1]);
  }
  
  return matches.join('\n');
}

const rawHtml = '<div><p>첫 번째 문장입니다.</p><p>두 번째 문장입니다.</p></div>';
const result = stripTags(rawHtml, 'p');
console.log(result);  // "첫 번째 문장입니다.\n두 번째 문장입니다."

위 코드에서는 정규식을 사용하여 `p` 태그 사이의 텍스트를 추출했습니다. [간단한 구조에서 특정 태그만 선택할 때] 유용하지만, 정규식은 복잡한 HTML 파싱에는 적합하지 않습니다.

3. Cheerio 라이브러리를 사용한 서버사이드 파싱

Cheerio란?

Cheerio는 서버사이드에서 HTML을 파싱하는 데 사용되는 라이브러리로, jQuery와 비슷한 방식으로 HTML에 접근할 수 있게 해줍니다. 서버에서 많은 HTML 데이터를 다뤄야 할 때 매우 유용하며, 클라이언트 사이드보다 더 성능이 중요시되는 경우 추천됩니다.

Cheerio로 HTML 파싱하기

npm install cheerio
const cheerio = require('cheerio');

function parseWithCheerio(htmlString) {
  const $ = cheerio.load(htmlString);
  
  // 'p' 태그 내부의 텍스트 추출
  const parsedText = $('p').map((i, el) => $(el).text()).get().join('\n');
  
  return parsedText;
}

const rawHtml = '<div><p>첫 번째 문장입니다.</p><p>두 번째 문장입니다.</p></div>';
const result = parseWithCheerio(rawHtml);
console.log(result);  // "첫 번째 문장입니다.\n두 번째 문장입니다."

Cheerio는 서버에서 많은 HTML 데이터를 처리하는 데 매우 강력한 도구입니다. 빠르고 유연한 서버사이드 HTML 파싱을 원한다면 Cheerio가 좋은 선택입니다.

4. React에서 HTML 파싱

React로 HTML 파싱하기

React 환경에서 HTML 콘텐츠를 파싱하려면 `dangerouslySetInnerHTML`을 사용해 HTML을 렌더링할 수 있습니다. 그러나 특정 요소만 선택하여 데이터를 가공하려면 DOM 접근 방식을 활용해야 합니다.

특정 클래스가 있는 요소만 파싱하는 예시

import React from 'react';

function parseSpecificContent(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  
  // 특정 클래스의 내용을 추출
  const specificContent = doc.querySelector('.specific-class')?.textContent || '';
  
  return specificContent;
}

const rawHtml = '<div><p class="specific-class">추출할 내용</p><p>다른 내용</p></div>';

export default function PostContent() {
  const content = parseSpecificContent(rawHtml);

  return (
    <div>
      <h2>Parsed Content:</h2>
      <p>{content}</p>
    </div>
  );
}

이 코드는 React 환경에서 DOMParser를 활용하여 특정 클래스가 포함된 요소의 텍스트를 추출하는 방법입니다. React에서 특정 HTML 콘텐츠를 파싱할 때 활용할 수 있습니다.

결론: 가장 적합한 파싱 도구를 선택하세요

HTML 콘텐츠에서 필요한 정보만 파싱하려면 프로젝트에 맞는 도구를 선택하는 것이 중요합니다. 간단한 구조를 다룰 때는 DOMParser나 정규식, 복잡한 서버사이드 작업에는 Cheerio, 그리고 React에서는 DOM 접근 방식을 선택하는 것이 좋습니다. 각 도구의 장단점을 잘 이해하고 적용하여 효율적으로 HTML 데이터를 처리해보세요.

답글 남기기