정규표현식과 함께 URL 뜯어보기

 

 

⛔️ 다음에서 정의하는 정규식이 모든 URL 형식에 대응되지는 않는 것에 유의해주세요.
⛔️ ipv4, ipv6 형식의 ip address 형식은 지원하지 않습니다.

 

URL(Uniform Resource Locator) 은 웹 상의 리소스를 가리키는 고유한 주소입니다.

HTML 페이지, CSS 및 이미지 리소스 등 그 어떤 것을 가리킬 수 있습니다.

이전에 텍스트 내에서 URL 형식의 문자열 파싱이 필요해서 URL 규격에 대해 찾아본 내용을 정리하겠습니다.

 

📌 RFC 문서 참조

이번 포스트에서 참고한 RFC 문서들은 다음과 같습니다.

 

• RFC 952 - https://datatracker.ietf.org/doc/html/rfc952
• RFC 1034 - https://datatracker.ietf.org/doc/html/rfc1034
• RFC 1123 - https://datatracker.ietf.org/doc/html/rfc1123
• RFC 1738 - https://datatracker.ietf.org/doc/html/rfc1738
• RFC 3986 - https://datatracker.ietf.org/doc/html/rfc3986

 

📌 URL 형식 뜯어보기

1️⃣ URL 구성요소

RFC 1738 chapter 3.3 을 보면 URL은 다음 형식으로 정의되어있습니다.

http://<host>:<port>/<path>?<searchpart>

2️⃣ URL 길이

RFC-1123 을 보면 hostname 최대 길이를 63자 (권장은 255자)까지 제한하도록 권장하고 있습니다.

또한 RFC-952 와 다르게 hostname의 첫 글자로 digit을 허용합니다.

Host software MUST handle host names of up to 63 characters and SHOULD handle host names of up to 255 characters.

 

이번 포스트에서는 63자로 제한하겠습니다.

3️⃣ Host 형식

host 형식은 RFC 1034 를 살펴보면 알 수 있습니다.

<domain> ::= <subdomain> | " "
<subdomain> ::= <label> | <subdomain> "." <label>
<label> ::= <letter> [ [ <ldh-str> ] <let-dig> ]
<ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
<let-dig-hyp> ::= <let-dig> | "-"
<let-dig> ::= <letter> | <digit>
<letter> ::= A-Z a-z 중 하나의 문자
<digit> ::= 0-9 중 하나의 숫자

 

위 의사 표현식을 풀어서 설명해 보겠습니다.
domain은 subdomain 혹은 빈 문자열로 정의됩니다.
그리고 subdomain은 하나 이상의 label 이 . 으로 연결된 형태가 되는 것이죠.
여기서 label 은 하나 이상의 알파벳으로 시작하며 - 구분자와 영문자(대, 소)와 숫자로 구성됩니다.
이때 label의 마지막에는 - 구분자가 존재하면 안 되겠습니다.

 

위 내용을 바탕으로 label 에 대한 정규식은 다음과 같이 정의할 수 있습니다.

최대 63자까지 가능하도록 한 것에 유의하세요.

label: [a-z\d]([a-z\d-]{0,61}[a-z\d])?

 

label을 활용해서 host 정규식을 정의하면 다음과 같습니다.

host: ([a-z\d]([a-z\d-]{0,61}[a-z\d])?)(\.[a-z\d]([a-z\d-]{0,61}[a-z\d])?)*

4️⃣ Port 형식

포트번호는 생략 가능하며, 이 경우 HTTP 포트 번호인 80번이 기본 할당됩니다.

port: (:\d*)?

5️⃣ path와 searchpart의 형식

path와 searchpart에 대한 내용은 RFC3986 3.3에서 자세히 살펴볼 수 있습니다.

 

🧩 path 형식 알아보기

path    = path-abempty    ; begins with "/" or is empty 
        / path-absolute   ; begins with "/" but not "//"
        / path-noscheme   ; begins with a non-colon segment
        / path-rootless   ; begins with a segment
        / path-empty      ; zero characters

path-abempty  = *( "/" segment )
path-absolute = "/" [ segment-nz *( "/" segment ) ]
path-noscheme = segment-nz-nc *( "/" segment )
path-rootless = segment-nz *( "/" segment )
path-empty    = 0<pchar>

segment       = *pchar
segment-nz    = 1*pchar
segment-nz-nc = 1*( unreserved / pct-encoded / sub-delims / "@" )

 

위 의사 표현식을 통해서 path는 / 로 구분된 일련의 segment 나열로 정의할 수 있습니다.
세부적으로는 절대경로, 상대경로, scheme 유무에 따라 path의 구성방식에 약간의 차이가 존재합니다.

 

이제 segment를 구성하는 pchar 의 의사 표현식을 살펴봅시다.

pchar : unreserved / pct-encoded / sub-delims / ":" / "@"

// pchar 구성요소들. RFC3986 Appendix를 참고해보세요.

unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
pct-encoded   = "%" HEXDIG HEXDIG
sub-delims    =  "$" / "&" / "+" / "," / ";" / "=" 
                 / "!" / "'" / "(" / ")" / "*"

 

sub-delims 에서 !, (, ), *, ' 다섯 문자는 실제로 형식화된 사용처는 밝혀지지 않았지만, 엄격한 방식으로 제한하려면 이 문자들까지 유효한 문자로 포함해줘야 합니다.

 

🧩 search part (query & fragment) 형식 알아보기

search part 는 query parameter와 anchor로 구성됩니다.
parameter 는 ? 로 시작되며 key=value 형식의 질의 리스트로 구성됩니다.

// search parameter 예시

?key1=value&key2=value

 

anchor는 리소스의 특정 부분을 가리키는 일종의 북마크입니다.
흔히fragement identifier 라는 용어로 알려져 있습니다.

RFC 3986의 section 3.4, 3.5 를 살펴보면, 두 URI 컴포넌트가 요구하는 형식은 다음과 같습니다.
앞선 path와 동일한 pchar 형식을 공유하네요!

query = *(pchar / "/" / "?")
fragment = *(pchar / "/" / "?")

 

🧩 path, query 정규식 구현하기

위에서 정리한 내용을 바탕으로 path 와 query 에 대응하는 정규식을 작성합니다.

path: ([a-zA-Z0-9@;:%.,_+~#=/?&-]*)
query: 동일합니다.

 

정규식의 문자 클래스 를 이용해서 간소화하면 다음과 같이 표현할 수 있습니다.

path: ([\w@;:%.,+~#=/?&-]*)
query: 동일합니다.

 

📌 종합하면

(http|https):\/\/([a-z\d]([a-z\d-]{0,61}[a-z\d])?)(\.[a-z\d]([a-z\d-]{0,61}[a-z\d])?)*(:\d*)?\b([\w@;:%.,+~#=/?&-]*)

 

📌 URL 클래스 사용하는 방법

특정 문자열이 유효한 주소 형식인지 판단하는 아주 간단한 방법이 있는데, 바로 URL 클래스를 이용하는 것입니다.

다만 URL 생성자가 safari 14.1부터 지원하기 때문에 이전 버전까지 대응이 필요하다면 core-js를 통한 polyfill 주입이 필요합니다.

function checkUrl(url) {
  try {
     new URL(url);
  } catch (error) {
     return false; 
  }

  return true;
}

 

다만 저의 경우에는 특정 문자로 문자열이 구분되지 않은 상황에서(ex. 공백문자) URL을 식별해야 했기 때문에
이 방법을 사용할 수 없어서 정규식을 이용하는 방식으로 접근했습니다.

 

📌 참고자료

URL: URL() constructor - Web APIs | MDN

encodeURIComponent() - JavaScript | MDN

What is a URL? - Learn web development | MDN

What's valid and what's not in a URI query?

Query string

Regular expression to match DNS hostname or IP Address?

Regular Expression for Checking if a String Is a Valid URL | Baeldung on Computer Science