문자열에서 HTML 태그 제거하기
JavaScript에서는 정규표현식(Regular Expression)을 활용하여 문자열에 포함된 HTML/XML 태그를 간단하게 제거할 수 있습니다. span, div 같은 HTML 요소는 <div>, <span>처럼 여닫이 꺾쇠괄호(< >) 사이에 위치합니다. 따라서 정규표현식으로 꺾쇠괄호와 그 안의 내용을 모두 빈 문자열('')로 치환하면 손쉽게 태그를 제거할 수 있습니다.
기본 문법
str.replace( /(<([^>]+)>)/ig, '');
위 정규표현식에서 /ig 플래그는 대소문자를 구분하지 않고(i), 문자열 전체에서 일치하는 모든 패턴을 찾도록(g) 설정합니다.
예제 1
<html>
<body>
<script>
function removeTags(str) {
if ((str===null) || (str===''))
return false;
else
str = str.toString();
return str.replace( /(<([^>]+)>)/ig, '');
}
document.write(removeTags('<html> <body> Javascript<body> is not Java'));;
</script>
</body>
</html>출력 결과
Javascript is not Java
위 예제에서는 입력 문자열의 null 또는 빈 문자열 여부를 먼저 확인한 뒤, toString() 메서드로 문자열로 변환하고 정규표현식을 적용해 모든 HTML 태그가 제거된 결과를 반환합니다.
예제 2
<html>
<body>
<script>
function removeTags(str) {
if ((str===null) || (str===''))
return false;
else
str = str.toString();
return str.replace( /(<([^>]+)>)/ig, '');
}
document.write(removeTags('<html> Tutorix is <script> the best <body> e-learning platform'));;
</script>
</body>
</html>출력 결과
Tutorix is the best e-learning platform
두 번째 예제 역시 동일한 방식으로 작동하며, script나 body처럼 다양한 종류의 태그가 섞여 있어도 한 번의 replace 호출만으로 깔끔하게 순수 텍스트만 추출할 수 있습니다.