정규 표현식 RegExp (TIL)

📚 오늘 학습 내용

---

정규 표현식

구성

	/	RegExr	/	i
	|			|	|
   시작		   종료 플레그

플레그

Flag	Meaning	Description
g	global	모든 케이스를 검색.
i	case-insensitive	대소문자 구분 무시.
m	multiline	줄 단위가 아니라 전체 문자의 시작과 끝만 본다.
s	dotall	.​(모든 문자 정규식)이 개행 문자 \n도 포함하도록
u	unicode	유니코드 전체를 지원
y	sticky	문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화

예시
g 플레그 적용 X

san san seo

• 정규 표현식 : /san/
• 매칭 : san

g 플레그 적용 O

san san seo

• 정규 표현식 : /san/g

• 매칭 : san san

  s 플레그 적용 X

hello
dannysir

• 정규 표현식 : /hello.*dannysir/g
• 매칭 : X

s 플레그 적용 O

hello
dannysir

• 정규 표현식 : /hello.*world/gs
• 매칭 : 입력 문자열 전체.

정규 표현식 기호 모음.

패턴	의미
a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두)단, 줄바꿈 X
\d	숫자
\D	숫자가 아닌 것
\w	밑줄 문자를 포함한 영숫자 문자에 대응[A-Za-z0-9_] 와 동일
\W	\w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호 * \^ \& ! \? ...등
\b	63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary)
\B	63개 문자에 일치하는 경계
\x	16진수 문자에 일치/\x61/는 a에 일치
\0	8진수 문자에 일치/\141/은 a에 일치
\u	유니코드(Unicode) 문자에 일치/\u0061/는 a에 일치
\c	제어(Control) 문자에 일치
\f	폼 피드(FF, U+000C) 문자에 일치
\n	줄 바꿈(LF, U+000A) 문자에 일치
\r	캐리지 리턴(CR, U+000D) 문자에 일치
\t	탭 (U+0009) 문자에 일치

정규 표현식 그룹화 방법

기호	의미
()	그룹화 및 캡쳐
(?: 패턴)	그룹화 (캡쳐 X)
(?=)	앞쪽 일치(Lookahead), /ab(?=c)/
(?!)	부정 앞쪽 일치(Negative Lookahead), /ab(?!c)/
(?<=)	뒤쪽 일치(Lookbehind), /(?<=ab)c/
(?<!)	부정 뒤쪽 일치(Negative Lookbehind), /(?<!ab)c/

DOM tree

1. Lexer에서 분석한 결과를 통해 트리 구조로 바꿔준다.
2. Parser가 위의 과정을 진행하며, AST(추상 구문트리) 구조로 만든다.

   참고 : 추상 구문트리 - 위키 백과

이제 웹페이지가 랜더링 되는 순서를 살펴 보면 다음과 같다.

• HTML을 HTML 파서가 읽는다.
  • HTML 파서가 DOM 트리를 만든다.
• CSS 또한 CSS 파서가 읽는다.
  • CSS 파서가 CSSOM 트리를 만든다.
• 위의 과정을 통해 얻은 DOM트리, CSSOM 트리를 합쳐 Render Tree를 만든다.
• Render Tree를 이용해 화면을 그린다.

참고 블로그
https://talkingaboutme.tistory.com/entry/Compiler-Parser-동작
https://jake-seo-dev.tistory.com/465
https://velog.io/@jun_/구문-분석과-DOM-Parser
이미지 출처
https://velog.io/@moonshadow/CSSOM