[Learn] Html에서 style만 삭제하기! (+ VS Code)

---

영어 뉴스레터 해석 포스팅을 올리려던 찰나, 복사 붙여넣기를 하면 서식까지 그대로 가져와 자동으로 흰 배경이 되는 것을 참을 수 없었다..

 

밤 배경 이미지. 지금 보니 다른 글자들은 아예 검은색 처리가 되서 보이질 않는다.

낮 테마로 사용했을 때 전혀 티가 나지 않지만 그래도 뭔가 신경쓰여서 아예 저 배경색을 없애려고 HTML란으로 들어가보니, style=어쩌구저쩌구에 배경색이 자동으로 들어가는 것을 확인했다.

 

그래서 이걸 지우려고 보니 뭔가 수동으로 하긴 귀찮고, 자동으로 한번에 따라락 없애면 좋겠는데..?

해서 VS Code의 정규표현식을 찾아보게 되었다.

 

그래서 어떻게..?

스택 오버플로우를 뒤져보니 style="[\w|\W]*?"을 하면 전부 삭제된다길래 실행해 봤는데.. 내가 원하는 저 배경색의 스타일 말고 다른 스타일(예를 들어 하이퍼링크라던지, 형광펜을 칠한 글자라던지)도 전부 없애버려서 다른 방법을 찾아야 했는데..

 

어차피 저기서 조금만 더 변형시키면 될 것 같았다.

 

정규표현식을 항상 겉핥기로 쓰윽 쳐다봐서 이번 기회에 다시 쳐다보게 되었다. 

 

일단 위의 정규식을 한번 뜯어보자.

style="[\w|\W]*?"

[] : 괄호 안의 문자들 중 하나. or 처리라고 보면 된다.
	 /xyz/ : "xyz"를 포함하는
     /[xyz]/ : "x"나 "y"나 "z"중 아무거나 포함하는
\w : 영문자와 숫자와 밑줄 문자. [A-Za-z0-9_]와 같다. 
\W : \w를 제외한 모든 문자
*? : 앞의 문자가 (있거나, 없거나) and (없거나, 최대 한개)

큰따옴표 안에,

아무 문자를 포함하며,

해당 문자가 아예 없거나 1개만 있어야 한다.

 

이러면 아래와 같은 결과가 나온다.

위의 data-ke-style="style3"까지 포함시키는 것을 볼 수 있다.

내가 지우고 싶은 style은 모두 뒤에 공통적으로 start;가 있기 때문에 이를 이용하면 될 것 같았다.

 

위를 조금만 변형해보자.

style=".*?(start;|left;|333;)+"

. : \n을 제외한 모든 문자
*? : 앞의 문자가 (있거나, 없거나) and (없거나, 최대 한개)
(start;|left;) : 그룹해서 이 단어를 지칭, 여기서는 start;와 left;
+ : 최소 1개 or 여러개가 있어야 함

큰따옴표 안에,

아무 문자를 포함하며,

해당 문자가 아예 없거나 1개만 있어야 하며,

뒤에 start; 문자열이 있으며,

해당 문자가 적어도 1개는 있어야 한다.

 

 

 

정규표현식을 너무 몰라서 (start;) 하나가지고 삽질하다가 공부를 좀 많이 한 것 같은데.. 반성의 의미로 포스팅을 해본다.

 

참고한 사이트

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC

 

https://stackoverflow.com/questions/58535053/how-to-strip-all-the-class-css-attributes-in-a-html-file-in-vscode

How to strip all the class (CSS) attributes in a HTML file in vscode?