[JavaScript] 정규표현식 특정 문자 제외하고 문자열 찾기, html 태그 제외하고 문자 찾기, html 표현식 제외하고 replace, & &nbsp, regular expression html tag

regex, 정규표현식

 

 

정규 표현식

정규 표현식(== 정규식)은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다.

주로 문자열을 찾거나 replace 할 때 많이 쓰입니다.

---

 

 

전반적인 개념보다는 제가 찾아보다가 알게된 팁에서만 간단히 포스팅해보려 합니다.

정규식에 대해 제대로 공부하고싶으신 분들은 다음 사이트들을 참고해보세요.

 

1. MDN Web Docs

- MDN 사이트이긴한데 영어로 보면 이해가 완벽하게 안돼서 한글로 보면 발번역이라,, 그래도 전체적인 내용이 다 정리돼있는 사이트입니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN

 

2. 블로그

- 역시 공부는 블로그로,,,^^! 한글로 아주 쉽고 보기좋게 정리돼있는 블로그입니다 전 여길 보시는걸 추천!

https://wormwlrm.github.io/2020/07/19/Regular-Expressions-Tutorial.html

정규표현식 완전정복 - 재그지그의 개발 블로그

 

---

 

정규식 팁

regexr.com 사이트에 가시면 아주 쉽게 정규식이 맞는지 테스트 해볼 수 있습니다.

UI도 매우 깔끔하게 아주 보기 좋게 잘 만들었더라구요!

계속 코드를 바꿔가며 테스트해보기가 귀찮거나 힘드신 분들은 한번 방문해보세요.

https://regexr.com

RegExr: Learn, Build, & Test RegEx

 

 

---

 

특정 조건에 해당되는 문자(열) 찾는 법

 

제가 원했던 조건은 다음과 같습니다.

 

1. 입력으로 들어오는 문자(열)을 찾는다. (찾은 후 replace 메소드 사용)

2. 단,

• html 태그 속 내용
• <span></span> 태그 사이에 있는 문자
• &amp, &nbsp 등 html entity

는 무시한다.

   

 

방법은 다음과 같습니다.

바로 코드로 보겠습니다.

/(r|a)+(?![^<]*>)+(?![^<]*?<\/span>)+(?![^&]*;)/gi

소괄호로 묶여있는 네개의 뭉텅이로 나눠서 하나씩 보겠습니다.

 

앞뒤에 있는 /~/ 는 정규식이라는 것을 명시해주는 코드이며, 

g 는 문자열 내 모든 패턴들을 검색한다는 것을 의미,

i 는 Ignore case를 표현하며 대소문자를 구분하지 않고 찾는다는 것을 의미합니다.

 

1. 

(r|a)

-찾는 문자열을 나타냅니다. 

이때 '|' 는 우리가 흔히 쓰는 그 or 표현입니다.

즉, 여기서는 문자 'r' or 'a' 를 찾는다는 것을 의미합니다.

 

 

2. 

(?![^<]*>)

- 첫번째 조건이었던 html 태그 속 내용은 무시한다는 것을 의미합니다.

(?![^<]*>)

정확히 말하자면, 위 표현에 포함되어 있는 '<' 와 '>' 사이의 내용을 무시한다는 것을 나타냅니다. 

 

따라서 대괄호 속 내용, 혹은 특정 문자 사이의 내용을 무시하고 싶다면

(?![^\[]*\[) // 대괄호 속 내용 무시

(?![^x]*y) // x와 y사이의 내용 무시

이런식으로 바꿔주시면 됩니다.

 

이 때 첫번째 경우에서 \이 붙는 이유는, 대괄호가 정규식에서 하나의 표현식으로 사용되기 때문에, 

"다음의 문자는 표현식(정확한 용어는 'Meta 문자')이 아니라 그냥 문자이다~"

라는 것을 표현해주기 위해서 입니다.

 

 

3. 

(?![^<]*?<\/span>)

- span 태그 사이의 내용을 무시한다는 것을 의미합니다.

 

 

4. 

(?![^&]*;)

(?![^&]*;)

- 2와 같은 맥락으로, '&'와 ';' 사이에 있는 내용은 무시하겠다는 것을 의미합니다.

HTML entity들은 '&nbsp;', '&amp;' 등 다 &로 시작해서 ; 로 끝납니다.

따라서 위와같이 써주면 잘 작동하게 됩니다.

 

 

5. 

+

그리고 위의 내용들을 묶어주는 '+' 기호는, 

바로 연상이 되듯 '+' 뒤의 조건들을 추가하겠다는 것을 의미합니다. 

 

 

위에서 언급한 사이트에서 테스트 해본 결과입니다.

<a href= ~~>Test</a>     이렇게 a 태그에 있는 a,

<span>a</span>             span 태그 사이에 있는 a,

&amp;                           html entity의 a는 잘 무시되고 있는 것을 확인할 수 있습니다. 

 

 

---

 

정규식을 마스터해서 언제나 원하는 내용을 바로바로 머릿속에서 생각해낼 만큼 공부할 필요는 없다고 생각합니다.

필요할 때 조금씩, 필요한 만큼만 구글링 해서 쓰면 됩니다.

그러다가 필요하면 그때 공부해도 되구요.

 

아무튼 저는 저한테 필요한 내용은 여기까지였어서 이만 글 마치겠습니다.

다음에 또 필요할 때 정규식에 대한 내용 더 포스팅 해보겠습니다!