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

HOME > js

자바스크립트 정규표현식, div 태그 제거하거나 br태그로 바꾸는 방법

Last Modified : 2017-11-23 / Created : 2017-11-23
16,089
View Count
에디터를 직접 만들거나 입력된 문자의 div태그를 다른 태그로 제거하고 싶을때 br태그로 바꾸는 방법을 많이 사용합니다. 만약 div 태그를 제거하거나 br태그로 바꾸려는 경우 어떻게 해야할까요?



# div 태그를 쉽게 제거 또는 br로 방법

가장 빠르고 간단한 방법은 <div></div>의 텍스트를 모두 찾아 바꾸는 방법이 제일 쉽습니다. 예를들어 아래의 경우 다음과 같이 적용할 수 있습니다.
<div id="test">
  <div><span>Webisfree.com</span></div>
</div>

여기서 id가 test인 엘리먼트 안에 존재하는 코드를 불러와 아래와 같이 적용합니다.
var ele = document.querySelector("#test");
var result = ele.innerHTML.replace(/(<div>|<\/div>)/gi, "");
ele.innerHTML = result;

이제 위 코드의 div태그는 모두 제거하게됩니다. 만약 br태그로 변경한다면? 이때는 닫는 부분만 br로 변경할 수 있을 것입니다.
var result = ele.innerHTML.replace(/<div>/gi, "");
result = result.replace(/<\/div>/gi, "<br>");

이제 br 태그로 변경되었습니다. 매우 쉽죠? 그런데... 여기에는 한계가 있습니다. 속성이 가진 div태그인 경우가 말이죠...



# div 태그에 class 또는 id 등의 속성이 있는 경우

만약 div 태그에 class 또는 id등이 포함된 경우라면? 위의 방법으로는 아쉽게도 적용되지 않습니다. 좀 더 향상된 정규표현식을 필요로하겠죠. 이때는 어떻게 할까요?

예제를 통해서 알아봅니다. 만약 아래와 같은 html 코드가 있는 경우 이를 바꾸어보도록 하겠습니다.
<span>Hi</span>
<div class="myClass">
  Brother
</div>

위 태그를 innerHTML등의 방법으로 코드를 불러와 str 변수에 저장하였습니다. 여기에 정규표현식을 적용합니다.
var str = '<span>Hi</span> <div class="myClass">Brother</div>';
var myRegExp = /(<|<\/)div([\s.'"=a-zA-Z]*)>/gi;
str.replace(myRegExp , '');

console.log(str);

결과는 아래와 같습니다.
<span>Hi</span> Brother

기존에 안되던 부분인 class, id가 포함된 DIV 태그 역시 모두 제거되며 이 외의 span 태그 등은 그대로 사용이 가능한 방법입니다.



# 마치면서

위즈윅이라고 용어가 있죠. html 또는 텍스트 에디터를 구현할때 적용된 스타일이 눈에 보이는 그대로 나타나는 에디터를 의미합니다. 이를 구현할때 엘리먼트에 contentEditable 속성이 많이 사용되는데 div로 변환되는 것을 br태그로 변경하기 위해 많이 사용됩니다. div 태그 자체가 위계를 가지기 때문에 가급적 단순한 br을 적용하는 것이 수정, 편집 등에 유리할 수 있겠죠! 왜 이 코드가 필요한가에 대하여 답변이 될 것입니다.

Previous

자바스크립트 for 반복문 약식 표현 예제보기

Previous

자바스크립트 Canvas에 백그라운드 배경을 추가하는 방법