HTML → 텍스트

HTML 엔티티와 블록 줄바꿈을 보존하면서 HTML에서 일반 텍스트를 추출합니다.

HTML 문서나 조각에서 태그를 걷어 내고 사람이 읽을 수 있는 텍스트만 남깁니다. script와 style 내용은 버리고, 블록 요소의 경계에 줄바꿈을 넣습니다.

사용 순서

입력란에 HTML 조각이나 페이지의 body 부분을 붙여 넣습니다.
결과 영역에 나온 텍스트의 줄 구성을 확인합니다.
엔티티(& 같은 표현)가 글자로 바뀌었는지 확인합니다.
복사 버튼으로 텍스트를 가져갑니다.

예시

<h1>Hello & 안녕</h1><p>First line<br>Second line</p> 를 입력하면 Hello & 안녕, First line, Second line이 세 줄로 나옵니다. 엔티티는 글자로 바뀌고, br과 블록 태그는 줄바꿈이 됩니다.

한계

CSS를 계산하지 않으므로 display:none으로 숨긴 요소의 텍스트도 결과에 들어갑니다. 제거하는 것은 script와 style 요소뿐입니다. span처럼 인라인인 요소 사이에는 공백을 넣지 않아 단어가 붙어 보일 수 있습니다. 입력이 2MB를 넘으면 오류가 납니다. 이미지나 링크 주소는 가져오지 않습니다.

보안 주의

결과 텍스트에는 &, <, 큰따옴표가 글자 그대로 남습니다. 이 텍스트를 다시 innerHTML이나 HTML 템플릿에 넣으면 의도하지 않은 마크업이 되므로, HTML로 다시 쓸 때는 특수문자를 이스케이프해야 합니다.

배경 지식

HTML 문서는 태그와 텍스트가 섞인 트리 구조입니다. 검색 색인, 요약, 메일 본문 생성처럼 텍스트만 필요할 때는 이 트리에서 텍스트 노드만 골라 모아야 합니다. 이때 엔티티(&, < 같은 표현)는 화면에 보이는 문자로 바꾸고, script와 style처럼 화면에 보이지 않는 내용은 제외합니다. 태그를 정규식으로 지우는 방식은 엔티티와 중첩 구조를 다루지 못해서 결과가 자주 틀립니다.

블록 요소(p, div, li, h1 같은 요소)는 화면에서 줄이 바뀌는 단위입니다. 텍스트 추출기는 이런 요소의 경계에 줄바꿈을 넣어 단락 구조를 살립니다. 이 도구는 브라우저의 template 요소에 HTML을 넣어 파싱하므로 이미지가 로드되거나 스크립트가 실행되지 않습니다. 외부 페이지의 내용을 안전하게 읽는 데는 적합하지만, 실제 렌더링 결과와는 차이가 날 수 있습니다.

자주 묻는 질문

결과에 공백이 연속으로 나오는 이유는 무엇인가요?

원본 HTML의 들여쓰기와 줄바꿈이 텍스트 노드에 그대로 남기 때문입니다. 이 도구는 줄 앞뒤의 공백과 탭을 정리하지만, 문장 중간에 있는 여러 칸의 공백은 줄이지 않습니다. 필요하면 결과를 정규식으로 한 번 더 정리해야 합니다.

표의 내용도 줄 단위로 구분되나요?

TR은 블록 목록에 있어서 행마다 줄이 나뉩니다. 하지만 TD는 그렇지 않아서 같은 행의 셀 사이에는 구분자가 들어가지 않고 값이 붙어 보일 수 있습니다. 표 데이터를 정확히 옮기려면 셀 단위로 따로 추출하는 편이 낫습니다.

스크립트 안의 문자열도 결과에서 빠지나요?

예. script와 style 요소는 파싱 직후 제거되므로 JSON 데이터나 인라인 CSS는 결과에 나오지 않습니다. 속성 값(alt, title 등)도 텍스트 노드가 아니므로 결과에 포함되지 않습니다.