JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리
크롤링 결과나 WYSIWYG 에디터에서 받은 HTML을 그대로 사용하지 않고, 텍스트만 깔끔하게 뽑아야 할 때가 많습니다. 이 글은 JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 관점에서 실무에 바로 적용 가능한 처리법을 정리합니다.
여기서는 정규식을 이용한 간단한 방법과 그 한계, 그리고 브라우저나 서버 환경에서 더 안전하게 처리하는 DOM/파서 기반 대안을 차례로 설명합니다. JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 내용을 통해 상황에 맞는 선택 기준을 제시합니다.
1. 정규 표현식으로 HTML 태그 삭제하기
가장 간단한 접근은 JavaScript의 replace()와 정규식을 이용해
<태그> 형태를 찾아 모두 제거하는 것입니다. 속도가 빠르고 코드도 짧아
간단한 전처리에 유용합니다.
var htmlString = "<html><head><title>제목</title></head><body><p>안녕하세요!</p></body></html>";
// 모든 태그 제거
var regex = /(<([^>]+)>)/ig;
htmlString = htmlString.replace(regex, '');
console.log(htmlString);
위 예제에서 정규식은 다음과 같은 역할을 합니다.
<([^>]+)>: <와 > 사이의 문자열(태그)을 선택합니다./.../ig: 전체 문자열에서 대소문자 구분 없이 검색합니다(글로벌, ignore-case).
2. 예제 코드 상세 설명
2-1. HTML 문자열 예시
var htmlString = "<html><head><title>제목</title></head><body><p>안녕하세요!</p></body></html>";
이 예시는 기본적인 HTML 태그들이 포함된 문자열을 보여줍니다. 텍스트 "제목"과 "안녕하세요!"처럼 태그 사이의 실제 내용만 남기려는 상황에 해당합니다.
2-2. 정규식 정의
var regex = /(<([^>]+)>)/ig;
- 이 패턴은 <와 >로 감싸인 모든 부분을 태그로 간주합니다.
[^>]+은 > 문자를 제외한 하나 이상의 문자에 매치합니다.- 캡처 그룹은 여기서 단순히 매칭을 위해 사용됩니다.
2-3. replace()로 태그 제거
htmlString = htmlString.replace(regex, '');
console.log(htmlString);
정규식에 매칭된 모든 태그를 빈 문자열로 교체하면 최종적으로 태그 없이 텍스트만 남게 됩니다. 간단하지만 몇 가지 예외를 고려해야 합니다.
요약하자면, JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 관점에서 이 방법은 '빠른 제거'가 필요할 때 유용합니다.
3. 정규식 방식의 한계와 주의사항
정규식 기반 태그 제거 시 주의할 점은 다음과 같습니다.
- 태그를 지우면 주변 텍스트가 붙어서 나오거나 의도치 않은 공백이 생길 수 있습니다.
- 주석, <script>, <style> 같은 블록 처리는 정교한 별도 로직이 필요합니다.
- 닫히지 않은 태그 등 불완전한 마크업에서는 잘못된 결과를 낳습니다.
- 입력값을 그대로 XSS 방어 용도로 처리하는 것은 안전하지 않습니다.
따라서 간단한 전처리 목적이라면 정규식으로 충분하지만, 보안·정확성을 요구하는 환경에서는 JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리 가이드에서 권하는 대안(파서 활용)을 고려하세요.
4. HTML 파서/DOM을 사용한 더 안전한 방법
브라우저 환경에서는 정규식 대신 DOM API를 활용하면 훨씬 견고하게 텍스트를 추출할 수 있습니다. 이 방식은 HTML 파서가 마크업을 정확히 해석하도록 맡기기 때문에 예외 처리가 줄어듭니다.
4-1. 임시 DOM 요소를 사용한 방법
function stripHtml(html) {
var temp = document.createElement('div');
temp.innerHTML = html;
return temp.textContent || temp.innerText || '';
}
var htmlString = "<p>안녕하세요! <strong>코드 예제</strong>입니다.</p>";
console.log(stripHtml(htmlString)); // "안녕하세요! 코드 예제입니다."
이 접근법의 장점은 다음과 같습니다.
- 브라우저의 파서가 HTML을 해석하므로 복잡한 구조도 비교적 안정적으로 처리됩니다.
- <script>, <style> 등의 특수 블록도 더 예측 가능한 방식으로 다뤄집니다.
- 정규식보다 유지보수가 쉽고 예외 케이스가 적습니다.
4-2. Node.js나 서버 환경에서는?
서버 사이드에서는 cheerio나 jsdom 같은 라이브러리를 사용해
DOM 형태로 파싱한 뒤 필요한 텍스트를 추출하는 것이 일반적입니다.
- 크롤링 결과에서 특정 영역만 안정적으로 가져와야 할 때
- 보안 필터링이나 XSS 방어 로직을 구현할 때
- 구조적으로 문서를 탐색하거나 변형해야 할 때
실무에서는 단순 제거가 목적이면 정규식, 신뢰성과 보안이 중요하면 DOM/파서 기반을 선택하는 것이 JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리의 핵심 권장 사항입니다.
5. 정리
여기까지 JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리를 통해
replace()와 정규식을 사용하면 간단하게 <...> 형태의 태그를 제거할 수 있습니다.- 블로그 전처리나 빠른 텍스트 정리에 적합하지만, 모든 경우에 안전하진 않습니다.
- 보안·정확성이 필요한 경우 DOM API나 서버 측 파서(cheerio, jsdom 등)를 활용하세요.
상황에 맞게 정규식 간단 처리와 DOM/라이브러리 기반 처리를 선택해 사용하는 것이 JavaScript에서 HTML 문자열을 다루는 가장 실용적인 전략입니다.
JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리는 결국 '속도 대 안정성'의 선택이며, 요구사항에 따라 적절한 방법을 고르면 됩니다.
함께 보면 좋은 엔터프라이즈 사례
🚀 이 주제, 우리 서비스에 어떻게 적용할까요?
JavaScript로 HTML 태그 제거하기 – 정규식과 DOM 방식 완전 정리를 실제 서비스와 조직에 녹여보고 싶다면, 현재 아키텍처와 운영 방식을 한 번 점검해 보는 것부터 시작해 보세요. 팀 위키나 기술 블로그, 사내 스터디 주제로도 아주 좋습니다.
이 글이 도움이 됐다면, 비슷한 엔터프라이즈 사례 글들도 함께 살펴보면서 우리 조직에 맞는 운영 상용구를 정의해 보세요.
댓글
댓글 쓰기