Regex 이용한 HTML 태그 찾아바꾸기

잘못된 HTML 태그를 대량으로 수정할 경우

html은 문법을 엄격히 체크하지 않아서 상관없지만 thymeleaf는 XML타입으로 인식해서 그런건지 html 태그가 하나라도 완성되지 않으면 오류가 발생한다.

 

아래의 태그는 다 오류...

<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css">
<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css">
<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css">
<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css">

이렇게 수정 해 줘야 한다.

<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css"/>
<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css"/>
<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"/>
<link rel="stylesheet" href="vendor/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css"/>

Regex를 이용한 찾아바꾸기

하나하나 찾아서 손으로 바꾸면 오류도 많이 나고 힘들다기보다는 열받는다.

 

이럴 때 사용할 수 있는게

Regex

패턴을 검색해서 문자열을 치환 해 주면 간단하다.

regex문자열을 만들 때 보통 온라인 툴을 많이 사용한다.

(개인적으로 애용하는 온라인 도구 https://regex101.com/)

 

보통 잘 안 닫고 넘어가는 tag는 link, img, input.

해당 태그를 수정해야한다.

 

HTML파일을 넣고 돌려보니 아래와 같은 Regex 문자열로 다 검색이 가능했다.

검색만 하면 되는게 아니고 유지할 문자열과 치환할 문자열을 구분 해 줘야한다.

(\<link[ a-zA-Z\"=\/@\-\\.]+\")(/?+>) $1 : (\<link[ a-zA-Z\"=\/@\-\\.]+\") $2 : (/?+>)

$1, $2 등은 그룹을 의미한다. 첫번째 괄호 $1, 두번째 괄호 $2.

vscode, notepad++, intellij, eclipse 등 개발할 때 자주 사용하는 에디터 프로그램에는 다 regex 검색 및 찾아바꾸기 기능이 있다.

 

 

아래 처럼 해 주면 완료.

link

검색식 : (\<link[ a-zA-Z\"=\/@\-\\.]+\")(/?+>)

치환문자열 : $1/>

 

img

검색식 : (\<img[ a-zA-Z\"=\/@\-\\.]+\")(\s?/?+>)

치환문자열 : $1/>

 

input, meta, br, hr...

 

 

첫번째 괄호의 내용만 갖다쓰고 뒷쪽은 />로 닫아버린다.

 

안된다구요? 그럴리가 없는데