HTML에서 태그를 걷어 읽을 글자만 남깁니다
HTML 태그 제거기는 <p>·<span> 같은 태그와 속성, 스크립트, 주석을 걷어 내고 사람이 읽는 글자만 남기는 도구입니다. 브라우저가 HTML을 읽는 규칙 그대로 원문을 해석하므로, 문단과 목록은 줄을 나눠 남기고 표는 칸 사이를 탭으로 나눕니다. 코드 안에서 줄을 맞추려고 넣은 줄바꿈과 들여쓰기는 화면에서처럼 빈칸 하나로 합칩니다.
원문 칸에서는 남는 글자가 진한 글자색 그대로, 걷히는 태그·속성·주석·스크립트는 다른 색으로 보입니다. 그 아래 HTML 구성 막대는 원문 바이트 가운데 읽을 글자가 얼마이고 나머지가 무엇이었는지를 보여 줍니다. 글자만 꺼내는 대신 p·a처럼 고른 태그만 남기거나 span·font처럼 고른 태그만 지운 HTML을 받을 수도 있습니다.
태그를 걷어 내는 상황
- 메일·뉴스레터 내용을 문서로 옮길 때: 메일 HTML은 배치용 표와 인라인 스타일, 받은편지함 미리 보기용 숨긴 문구로 가득합니다. 화면에 보이는 문장만 남기면 보고서나 메모에 바로 붙일 수 있습니다.
- 상품 상세 HTML에서 문구만 고칠 때: 쇼핑몰 관리자나 오픈마켓에서 내려받은 상세 설명은
font·span이 겹겹이 싸여 있습니다. 글자만 꺼내 맞춤법을 고치거나, 거꾸로span·font만 걷어 HTML을 가볍게 만들 수 있습니다. - 블로그·CMS 글의 글자 수를 셀 때: 워드프레스 블록 편집기 코드에는
<!-- wp:paragraph -->같은 주석과 태그가 섞여 있어 코드 그대로 세면 글자 수가 부풀려집니다. 결과 칸 위에 공백을 넣은 수와 뺀 수가 함께 나옵니다. - AI 도구·번역기에 넣기 전: 태그와 속성도 입력 길이를 차지합니다. 글자만 넣으면 같은 한도 안에 더 많은 본문을 넣을 수 있고, 번역기가 태그를 망가뜨릴 걱정도 없습니다.
- 엑셀·CSV 칸에 든 HTML을 정리할 때: 상품 목록을 내려받으면 설명 칸에 HTML이 그대로 들어 있는 경우가 많습니다. 블록 태그 없이 줄바꿈만 있는 글은 원문 줄바꿈을 살리고, 표는 탭으로 나눠 스프레드시트에 그대로 붙여 넣을 수 있습니다.
쓰는 법
- HTML 원문 칸에 코드를 붙여 넣습니다. 웹 페이지나 메일에서 화면을 복사해 붙이면 브라우저가 함께 넘겨주는 HTML 서식이 들어가고, 상태 줄의 ‘글자로만 붙이기’로 되돌릴 수 있습니다. .html·.xml·.svg 파일은 ‘파일 열기’나 끌어 놓기로 넣습니다.
- 정리된 글자 칸에 결과가 바로 나옵니다. 따로 누를 단추는 없습니다.
- 줄 모양(문단·줄마다·한 줄)과 링크 주소·그림 처리를 고릅니다. 메일처럼 숨긴 문구가 있는 HTML은 ‘숨긴 요소 빼기’가 켜져 있는지 봅니다.
- 태그를 일부 남기려면 남길 것에서 ‘고른 태그만 남기기’나 ‘고른 태그만 지우기’를 고르고, 이 문서의 태그 목록에서 태그를 누릅니다.
- ‘복사’를 누르거나 결과 칸에서 Ctrl+Enter(⌘+Enter)를 누르면 복사되고, ‘TXT 저장’(태그를 남긴 경우 ‘HTML 저장’)으로 파일을 받습니다.
줄바꿈은 화면에 보이는 대로 나눕니다
HTML에서 줄을 나누는 것은 원문 코드의 줄바꿈이 아니라 태그입니다. 이 도구는 브라우저의 innerText 규칙을 따라 p의 앞뒤에는 빈 줄을, div 같은 블록과 br, 표의 줄 사이에는 줄바꿈을, 표의 칸 사이에는 탭을 넣습니다. 제목·목록·표 덩어리의 앞뒤에도 빈 줄을 두어 읽기 쉽게 했습니다. 아래 표의 결과는 이 도구가 실제로 낸 값입니다(⇥는 탭).
| 원문 | HTML | 결과 |
|---|---|---|
p 문단 | <p>첫 문단</p><p>둘째 문단</p> | 첫 문단 |
div 같은 블록 | <div>첫 줄</div><div>둘째 줄</div> | 첫 줄 |
br 줄바꿈 | <p>첫 줄<br>둘째 줄</p> | 첫 줄 |
ul 목록 | <ul><li>사과</li><li>배</li></ul> | • 사과 |
ol 번호 목록(start 반영) | <ol start="3"><li>셋</li><li>넷</li></ol> | 3. 셋 |
table 표 | <table><tr><th>품목</th><th>수량</th></tr><tr><td>이어폰</td><td>1쌍</td></tr></table> | 품목 ⇥ 수량 |
| 코드 안의 줄바꿈·들여쓰기 | <p>코드 안의 | 코드 안의 줄바꿈과 들여쓰기 |
pre 서식 있는 글 | <pre> 들여쓰기 | 들여쓰기 |
| 블록 태그가 없는 글 | 이름: <b>홍길동</b> | 이름: 홍길동 |
결과의 줄 모양은 세 가지 가운데 고를 수 있습니다. 문단은 위 표처럼 문단 사이에 빈 줄을 하나 두어 글로 읽기 좋습니다. 줄마다는 빈 줄 없이 블록마다 줄을 바꿔 목록이나 스프레드시트 붙여 넣기에 맞습니다. 한 줄은 줄바꿈과 탭을 모두 빈칸으로 바꿔 메타 설명이나 표 한 칸에 넣을 글을 만들 때 씁니다.
정규식으로 태그를 지우면 생기는 일
태그를 지우는 가장 흔한 방법은 정규식 <[^>]+>로 ‘<부터 다음 >까지’를 지우는 것입니다. 짧은 조각에서는 잘 되지만 HTML 문법과 다르게 자르기 때문에 아래처럼 글이 사라지거나 쓰레기가 남습니다. 브라우저는 < 뒤가 영문자·!·/·?가 아니면 그냥 글자로 읽고, 따옴표 안의 >는 속성 값으로, script·style 안은 닫는 태그가 나올 때까지 통째로 원문으로 읽습니다. 이 도구도 같은 규칙으로 읽습니다.
| 원문 | 정규식 결과 | 이 도구 |
|---|---|---|
<p>재고가 3개보다 적으면(a < b) 알림</p> | 재고가 3개보다 적으면(a 글 속 < 뒤가 지워짐 | 재고가 3개보다 적으면(a < b) 알림 |
<div data-note="a>b">본문</div> | b">본문속성 값 안의 >에서 태그가 끝남 | 본문 |
<!--[if mso]><p>Outlook 안내</p><![endif]-->보이는 글 | Outlook 안내보이는 글주석 속 글이 살아남 | 보이는 글 |
<script>if (n < 3) alert(n)</script>본문 | if (n 본문스크립트 코드 조각이 남음 | 본문 |
<p>가격 & 배송</p> | 가격 & 배송문자 참조가 그대로 남음 | 가격 & 배송 |
<p>첫 문단</p><p>둘째 문단</p> | 첫 문단둘째 문단문단이 한 줄로 붙음 | 첫 문단 |
링크·그림·숨긴 글은 이렇게 다룹니다
기본 설정은 화면에 보이는 글자만 남깁니다. 링크는 글자만 남고 주소는 빠지며, 그림은 빠지고, hidden 속성이나 display:none·visibility:hidden으로 숨긴 요소도 빠집니다. 필요하면 아래처럼 바꿀 수 있습니다. 링크 글자가 주소와 같으면 주소를 두 번 적지 않고, #로 시작하는 문서 안 링크와 javascript: 링크는 주소를 붙이지 않습니다.
| 설정 | HTML | 결과 |
|---|---|---|
| 링크 주소 ▸ 글자 뒤에 | <p><a href="https://example.com/sale">할인 보기</a></p> | 할인 보기 (https://example.com/sale) |
| 링크 주소 ▸ 끝에 모아 | <p><a href="https://example.com/sale">할인 보기</a>와 <a href="https://example.com/faq">문의</a></p> | 할인 보기[1]와 문의[2] |
| 그림 ▸ 대체 글 | <p><img src="logo.png" alt="로고"> 로베린</p> | [그림: 로고] 로베린 |
| 숨긴 요소 빼기(기본) | <div style="display:none">미리 보기 문구</div><p>본문</p> | 본문 |
뉴스레터는 받은편지함 목록에 보일 미리 보기 문구를 본문 맨 앞에 숨겨 두고, 그 뒤를 ‌를 수십 번 이어 채우곤 합니다. 숨긴 요소를 빼면 이 문구와 채움 문자가 함께 사라집니다. 뺀 숨긴 요소의 수는 스위치 옆에 나옵니다.
고른 태그만 남기기·지우기
결과를 글자가 아니라 HTML로 받는 방식입니다. 고른 태그만 남기기는 이 문서의 태그 목록에서 누른 태그는 두고 나머지 태그만 걷습니다. 처음에는 문단·제목·목록·표·링크·굵게 같은 글 서식 태그가 골라져 있습니다. 고른 태그만 지우기는 반대로 누른 태그만 걷고 나머지는 그대로 둡니다. 처음에는 span과 font가 골라져 있습니다. 두 방식 모두 태그만 걷고 그 안의 글은 남깁니다. 걷은 태그만 있던 줄은 지우고, 블록 태그를 걷어 앞뒤 글이 붙게 되면 그 자리에서 줄을 바꿉니다. 그 밖의 줄바꿈과 들여쓰기, & 같은 문자 참조는 손대지 않습니다. title·textarea는 태그를 걷을 때 안의 글도 함께 뺍니다.
- 남긴 태그의 속성: ‘그대로’는 원문 속성을 두고, ‘필요한 것만’은
href·src·alt·colspan·rowspan만 남기며, ‘모두 지움’은 속성을 전부 지웁니다. 고른 태그만 남기기의 처음 값은 ‘필요한 것만’입니다. - 구글 문서에서 복사한 HTML: 내용 전체를
<b style="font-weight:normal" id="docs-internal-guid-…">가 감싸고 있습니다. 굵게가 아닌 이 감싸개는b를 남기도록 골라도 걷어 내므로, 결과 전체가 굵게 되는 일이 없습니다. 다만 구글 문서는 굵게를span의 style 값으로 적기 때문에span을 걷으면 굵게도 사라집니다. 서식까지 옮기려면 HTML Markdown 변환기를 쓰는 편이 맞습니다. - 보안 정화 도구가 아닙니다: 이 방식으로 만든 HTML을 남이 쓴 글로 받아 웹사이트에 넣지 마세요. 속성을 그대로 두면
onclick같은 속성이 남고, ‘필요한 것만’도href에 적힌javascript:주소를 걸러 내지 않습니다. 태그를 걷으면<<b>script>처럼 쪼개 둔 글자가 이어져 새 태그가 생길 수도 있어, 속성을 모두 지워도 안전하다고 할 수 없습니다. 사이트에 넣을 HTML은 DOMPurify처럼 검증된 정화 라이브러리로 처리하세요.
와 보이지 않는 문자
HTML의 는 줄이 바뀌지 않는 공백(U+00A0)이 되어 결과에 그대로 남습니다. 겉보기에는 빈칸이지만 문서 편집기의 찾기·바꾸기나 엑셀 수식에서 보통 빈칸과 다르게 다뤄져 문제가 생기곤 합니다. ‘ ·보이지 않는 문자 정리’를 켜 두면 줄 바뀜 없는 공백(U+00A0·U+2007·U+202F)은 보통 빈칸으로 바꾸고, 폭 없는 공백(U+200B)·단어 결합자(U+2060)·BOM(U+FEFF)·조건부 하이픈(U+00AD)·결합 문자 이음표(U+034F)는 지웁니다. 빈칸 옆에 붙은 폭 없는 비결합자(U+200C)도 메일 채움 문자로 보고 지웁니다. 이모지를 잇는 폭 없는 결합자(U+200D)와 글자 사이의 비결합자는 지우지 않습니다.
자주 틀리는 경우
- 페이지에서 본 글이 결과에 없다: 자바스크립트가 나중에 그려 넣는 글은 ‘페이지 소스 보기’의 HTML에 없습니다. 화면에 보이는 영역을 복사해 붙여 넣거나, 개발자 도구에서 요소를 복사해 넣으세요.
- 표가 한 줄씩 흩어진다: 메일처럼 배치를 위해 쓴 표(
role="presentation", 표 안의 표, 한 열짜리 표)는 칸을 탭으로 잇지 않고 칸마다 줄을 나눕니다. 자료 표의 칸 안에 든 줄바꿈은 스프레드시트에 붙일 때 줄이 밀리지 않게 빈칸으로 바꿉니다. - CSS 클래스로 숨긴 글이 남는다: 이 도구는 스타일시트를 계산하지 않습니다. 숨김은
hidden속성과 요소에 직접 적은style값만 봅니다. - 코드에서 센 글자 수와 다르다: 원문 코드의 줄바꿈과 들여쓰기는 빈칸 하나로 합쳐지고
&는&한 글자가 됩니다. 결과 칸 위의 글자 수가 화면에 보이는 글의 글자 수에 가깝습니다. - 머리말의 제목이 빠진다:
<head>안의<title>은 브라우저 탭에 쓰이는 이름이라 본문 글자로 치지 않습니다. 원문 칸에서는 회색으로 보입니다. - 정리된 글을 붙였더니 서식이 사라졌다: 글자만 꺼내면 굵게·링크 같은 서식은 남지 않습니다. 서식을 문서 구조로 남기려면 고른 태그만 남기기를 쓰거나 Markdown으로 바꾸세요.
한계: 이 도구가 알 수 없는 것
- CSS의
display·white-space값이나::before로 넣은 글은 계산하지 않습니다. 줄 나눔은 태그 종류로 정하므로 CSS로 배치를 바꾼 페이지는 화면과 다를 수 있습니다. - 상대 주소(
/sale)는 그대로 붙입니다. 원래 사이트 주소를 붙인 전체 주소로 바꾸지 않습니다. - 원문은 2 MB까지 다룹니다. 원문이 20만 자를 넘으면 색 구분을 끄고 정리만 합니다.
- 고른 태그만 남기기·지우기는 태그 이름만 봅니다. 여닫는 짝이 맞지 않는 HTML을 고쳐 주지 않으며, 보안 정화 도구가 아닙니다.
- 파일은 글자로 된 .html·.htm·.xhtml·.xml·.svg·.txt만 엽니다. 워드·PDF 문서의 글자는 읽지 못합니다.
출처
기준: HTML 해석 규칙은 WHATWG HTML Living Standard와 MDN 문서를 2026년 10월 22일에 확인했습니다. 표의 결과는 이 도구의 출력이고, 정규식 결과는 같은 원문에 <[^>]+>를 빈 글로 바꾼 값입니다.
- 01WHATWG HTML — innerText와 outerTextrendered text collection steps: p는 줄바꿈 2, 블록은 1, br은 줄바꿈, 표의 칸 사이는 탭, 줄 사이는 줄바꿈
- 02WHATWG HTML — 13.1.2 Elementsraw text 요소(script·style)와 escapable raw text 요소(textarea·title)
- 03WHATWG HTML — 13.2.5.6 Tag open state< 뒤가 영문자·!·/·?가 아니면 <를 글자로 내보냄
- 04MDN — DOMParser.parseFromString()text/html로 읽은 문서의 script는 실행되지 않음
- 05DOMPurify (cure53)HTML·SVG·MathML용 DOM 기반 XSS 정화 라이브러리
자주 묻는 질문
HTML 태그 제거기는 어떻게 쓰나요?
HTML 원문 칸에 코드를 붙여 넣거나 웹 화면에서 복사한 내용을 붙여 넣으면 정리된 글자 칸에 바로 결과가 나옵니다. 따로 누를 단추는 없고, 결과를 확인한 뒤 복사하거나 TXT 파일로 저장하면 됩니다.
정규식 <[^>]+> 로 지우는 것과 무엇이 다른가요?
정규식은 '<'에서 다음 '>'까지를 태그로 봅니다. 그래서 글 속의 'a < b'부터 다음 태그 끝까지 글자를 지우거나, 속성 값 안의 '>' 뒤를 글자로 남기거나, Outlook용 조건부 주석 안의 글을 살려 냅니다. 이 도구는 브라우저와 같은 규칙으로 HTML을 읽어 이런 경우를 구분합니다.
줄바꿈은 어떻게 정해지나요?
화면에 보이는 대로 나눕니다. 문단·제목·목록·표 사이에는 빈 줄을, div·목록 항목·표의 줄 사이와 br 자리에는 줄바꿈을 넣고, 원문 코드 안의 줄바꿈과 들여쓰기는 빈칸 하나로 합칩니다. 블록 태그가 하나도 없는 글은 원문 줄바꿈을 그대로 둡니다.
링크 주소도 남길 수 있나요?
링크 주소에서 '글자 뒤에'를 고르면 '할인 상품 보기 (https://…)'처럼 링크 글자 바로 뒤에, '끝에 모아'를 고르면 글자에 [1] 같은 번호를 달고 주소는 맨 끝에 모아 붙입니다. 링크 글자가 주소와 같으면 두 번 적지 않습니다.
메일 HTML에서 보이지 않던 글이 왜 빠지나요?
뉴스레터는 받은편지함 미리 보기용 문구를 display:none 같은 스타일로 숨겨 두는 경우가 많습니다. 기본 설정은 이런 숨긴 요소를 빼고 화면에 보이는 글만 남깁니다. 숨긴 글까지 보려면 '숨긴 요소 빼기'를 끄면 됩니다.
특정 태그만 남기거나 지울 수 있나요?
남길 것에서 '고른 태그만 남기기'나 '고른 태그만 지우기'를 고르고 이 문서의 태그 목록에서 태그를 누르면 됩니다. 결과는 HTML로 나오며, 남긴 태그의 class·style 같은 속성을 지우거나 주소·대체 글만 남길 수도 있습니다.
태그만 남기기로 만든 HTML을 웹사이트에 그대로 넣어도 안전한가요?
보안 정화 도구로 쓰지는 마세요. 속성을 그대로 두면 onclick 같은 속성도 남고, '필요한 것만'에서도 href에 적힌 javascript: 주소는 걸러 내지 않습니다. 남이 쓴 HTML을 사이트에 넣을 때는 DOMPurify 같은 검증된 정화 라이브러리를 쓰세요.
붙여 넣은 HTML이나 파일이 서버로 전송되나요?
아니요. 붙여 넣은 내용과 파일은 브라우저 안에서만 읽고, 주소나 저장소에도 남기지 않습니다. 원문의 script는 실행하지 않으며 그림 주소도 불러오지 않습니다.