VS Code에서 필요없는 html 태그를 전부 제거하는 정규표현식(regex) 사용

 

개요

필요없는 html 태그를 전부 제거 하는 포스팅입니다. 블로그 이전 중에도 이 문제가 골치 아프게 만들었고 전에 원노트나 에버노트, 메일을 통한 글쓰기 시 해당 tag 자체가 글로 넘어오면서 불필요한 태그로 인해 폰트가 고정되거나 하는 부분이 문제가 있었습니다.

블로그의 테마나 글씨체 등을 바꿀때 저런 태그들이 들어가 있으면 테마를 수정해도 일괄 적용이 불가능하기 때문에 해당 태그를 다 지워야 했습니다.

 

필요한 태그

포스팅 형태를 최대한 보존하기 위해 태그에도 필요한 태그와 필요가 없는 태그 들이 있습니다. 예를들어 img src 와 a href , table, td, tr 등과 같은 태그는 원래의 형태를 유지하기 위해 필수적인 태그들이죠. 인터넷에서 찾아도 태그를 제거할 수는 있으나 필요한 태그만 남기기가 어려웠습니다. 그래서 고민한 것이 정규표현식인데요.

정규표현식을 통한 태그 검출식

먼저 순수 html tag 만 선택해서 제거하려면 아래 식을 사용하면 됩니다.

<[^>]*>

하지만 해당 태그는 앞서 말씀드린 특정 태그들을 제외하지를 못합니다. 제가 마지막으로 사용한 태그는 아래와 같습니다.

<(?!img|a href|/a|tr|td|tbody|table|/tr|/td|/table|/tbody).*?>|&nbsp;

중간의 리스트를 보면 img, a href, /a, tr, td, tbody, table, /tr, /td, /tbody, /table 를 |로 나열해 놨습니다. |는 or 표현입니다.
마지막의 |  는 글에 공백문자입니다. 앞의 태그 제거 or 공백문자라는 뜻이니 지정해놓은 태그 외 나머지 태그와 공백문자가 다 지워져야 겠네요.

vs code를 통한 태그 삭제

https://code.visualstudio.com/ vscode는 MS에서 만든 강력한 IDE이자 텍스트 에디터 입니다. 여기서 ctrl+h (바꾸기)를 열어보시면 아래와 같이 창이 뜨며 클릭하시거나 alt+r 을 누르면 정규 표현식을 사용할 수 있습니다.

필요한 텍스트를 넣어놓은 상태에서 정규 표현식을 입력하면 아래와 같이 해당되는 내용들이 전부 블록 처리가 됩니다. 제대로 적용이 됐는지 확인 해 보시면 됩니다.

결과 확인

그 상태에서 바꿀 문자를 아무것도 없이 두고 전부 바꾸기를 클릭하시거나 alt+ctrl+enter 를 누르면 필요 없는 html 태그를 전부 제거 할 수 있습니다.