웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] 정규표현식을 사용하여 태그만 제거하기

Last Modified : 2019-08-07 / Created : 2015-12-22
59,338
View Count

아래는 정규표현식을 사용한 태그의 제거 방법입니다. 태그를 제거하기 위해서 내장함수에서 태그를 지원하는 함수가 있다면 편리하겠지만 순수 자바스크립트에서는 없는 부분이기에 다른 방법이 필요합니다. 가장 간편한 방법이 바로 정규표현식을 활용하는 방법입니다.

정규표현식의 replace() 함수는 특정 문자열을 패턴에 따라 원하는 대로 수정하여 반환할 수 있습니다. 그럼 어떻게하면 정규표현식을 사용해 태그를 제거할 수 있는지 알아봅니다.




# 정규표현식으로 태그 제거하는 방법


아래는 태그를 제거하기 위한 정규표현식으로 모든 태그를 제거합니다.

var newText = oriText.replace(/(<([^>]+)>)/ig,"");

위 정규표현식은 새로운 변수 newText에 변수 oriText에 포함된 태그 요소만 제거하여 변환해줍니다. 그럼  몇 가지 예제를 사용하여 어떻게 나타나는지 알아봅니다.


! 전체 태그 모두 제거하기 예제


아래 예제는 전체 태그를 모두 제거하는 예제입니다. 만약 아래와 같이 변수에 div와 span 태그가 포함된 경우 다음의 정규표현식을 사용해 제거해보려합니다.
<div id="test">
  <div>Remove all tag</div>
  <span>test</span>
</div>

이제 위 #test 엘리먼트에 innerHTML을 사용하여 태그가 포함된 문자열을 불러온 후 제거해야겠죠.
ele = document.getElementById('test');

oriText = ele.innerHTML;  // 아래와 같은 문자열이 저장됨
oriText = '<div>Remove all tag</div><span>test</span>';

newText = oriText.replace(/(<([^>]+)>)/ig,"");
alert(newText);

위 예제는 모든 태그 요소를 제거 후 화면에 출력합니다. 출력 결과는 다음과 같습니다.
Remove all tagtest

보시는 것처럼 태그 요소는 제거되어 나타나게 됩니다.


! 원하는 태그만 제거하는 방법


이번에는 모든 태그가 아닌 내가 원하는... 선택한 태그만 제거해보겠습니다. 간단한 예제를 보겠습니다.

아래 예제는 모든 태그가 아닌 span 태그만 제거하려고 합니다.
oriText = '<div>Remove Span</div> <span>tag only</span>';
newText = oriText.replace(/<(\/span|span)([^>]*)>/gi,"");

alert(newText);

출력 결과는 다음과 같습니다.
<div>Remove Span</div> tag only

간단하게 span 태그가 제거되었습니다. 정규표현식의 span을 다른 값으로 바꾸어 원하는 어떤 태그든 제거할 수 있습니다.

Previous

제이쿼리 hover() 이벤트 배우기

Previous

[자바스크립트] confirm() 메소드 사용방법 알아보기