HTML 태그 제거기 (순수 텍스트 추출)

붙여넣으면 태그가 딸려 오는 문제

블로그 편집기, 워드, 노션, 웹메일에서 글을 복사하면 눈에는 안 보여도 <p>·<span style="…"> 같은 태그가 함께 붙어 옵니다. 그대로 다른 곳에 붙이면 서식이 깨지거나 태그가 그대로 드러납니다. 이 도구는 그 태그를 걷어내고 읽을 수 있는 순수 텍스트만 남깁니다.

태그 제거와 엔티티 디코드는 다른 일이다

둘을 자주 뭉뚱그리는데, 실제로는 서로 다른 두 단계입니다.

• 태그 제거 — <b>굵게</b> 에서 꺾쇠 태그를 없애 굵게 만 남깁니다.
• 엔티티 디코드 — & → &, ' → ' 처럼 문자로 표현된 코드를 실제 문자로 되돌립니다.

순서가 중요합니다. 이 도구는 태그를 먼저 지우고 엔티티를 나중에 풉니다. 만약 엔티티를 먼저 풀면 글 속에 인용해 둔 <script> 가 진짜 <script> 로 되살아나 다음 단계에서 지워져 버립니다. 코드 예시를 담은 글에서 조용히 내용이 사라지는 사고가 여기서 납니다.

<script>·<style> 는 내용째

태그만 지우고 내용을 남기면 alert('x') 나 .box{color:red} 같은 코드가 본문에 섞여 나옵니다. 그래서 이 둘은 여는 태그부터 닫는 태그까지 통째로 지웁니다.

줄바꿈을 남길지 정하기

<p>·<div>·<li>·<br> 같은 블록 요소는 문단과 항목을 나누는 경계입니다. ‘줄바꿈 유지’를 켜면 이들을 줄바꿈으로 바꿔 문단·목록 구조를 남기고, 끄면 전부 한 줄로 이어 붙입니다. 반대로 <b>·<a> 같은 인라인 태그는 글 흐름 중간에 있으므로 어느 쪽이든 줄을 나누지 않습니다.

완전한 파서가 아니라는 정직한 한계

이 도구는 DOM을 만들지 않고 정규식으로 태그를 지웁니다. 덕분에 서버로 아무 것도 보내지 않고 브라우저 안에서 즉시 끝나지만, 대가가 있습니다.

• 부등호를 지키려는 규칙 — < 뒤에 글자·/·! 가 와야 태그로 봅니다. 그래서 a < b 는 안전하지만, 아주 비정상적으로 꼬인 마크업은 완벽히 처리하지 못할 수 있습니다.
• 보안용이 아닙니다. 악의적으로 설계한 입력은 정규식을 우회할 수 있습니다. 사용자 입력을 안전하게 만들려면 DOMPurify 같은 전용 sanitizer 를 쓰세요.

이럴 때 씁니다

• 글 옮겨 붙이기 — 블로그·노션·워드에서 복사한 글의 서식을 걷어내고 텍스트만.
• 데이터 전처리 — 크롤링·RSS·메일 본문에서 태그를 지워 분석·요약에 넣기.
• 글자 수 확인 전 정리 — 태그를 지운 실제 본문 길이를 세기 전에.

정리하면

• 태그 제거 → 엔티티 디코드 순서. 반대로 하면 인용한 코드가 사라집니다.
• script·style 은 내용째, 블록 태그는 줄바꿈으로.
• 읽기용이지 보안용이 아닙니다. XSS 방어에는 전용 sanitizer 를.