JavaScript:
HTML 파싱

방법:

자바스크립트에서 DOMParser API를 사용해서 HTML을 파싱해봅시다.

const parser = new DOMParser();
const htmlString = `<p>Hello, world!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // 출력: Hello, world!

이제 클래스가 있는 특정 요소를 가져와 보겠습니다:

const htmlString = `<div><p class="greeting">Hello, again!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // 출력: Hello, again!

심층 탐구

HTML 파싱은 웹만큼이나 오래되었습니다. 처음에는 브라우저가 웹 페이지를 표시하기 위해 HTML을 파싱하는 것이었습니다. 시간이 지나면서 프로그래머들은 이 과정에 접근하고자 했고, 이로 인해 DOMParser와 같은 API가 생겨났습니다.

대안이 있나요? 물론입니다. 우리는 jQuery나 파이썬용 BeautifulSoup 같은 라이브러리가 있습니다. 하지만 자바스크립트의 네이티브 DOMParser는 빠르고 내장되어 있어, 추가 라이브러리가 필요 없습니다.

실행 측면에서 볼 때, DOMParser로 HTML을 파싱하면 Document 객체를 생성합니다. 이를 HTML의 계층적 모델로 생각할 수 있습니다. 한 번 가지게 되면, 일반 웹 페이지의 DOM처럼 이를 탐색하고 조작할 수 있습니다.

여기서 중요한 점—파싱은 잘못된 HTML에서 문제를 일으킬 수 있습니다. 브라우저는 관대하지만, DOMParser는 그렇지 않을 수 있습니다. 따라서 복잡한 작업이나 지저분한 HTML의 경우, 타사 라이브러리가 더 나은 정리 작업을 수행할 수 있습니다.

참고 자료

• DOMParser API에 관한 MDN 웹 문서: MDN DOMParser
• jQuery의 파싱 기능: jQuery.parseHTML()
• 서버용 코어 jQuery의 빠르고 유연하며 간결한 구현인 Cheerio: Cheerio.js
• JS가 아닌 파싱을 위해: 파이썬의 BeautifulSoup 라이브러리: Beautiful Soup