[javascript] 자바스크립트 정규식을 활용한 URL 파싱

08 Dec 2023

javascript

웹 개발에서 URL(Uniform Resource Locator) 파싱은 매우 중요합니다. URL에서 도메인, 경로, 쿼리 매개변수 등을 추출해야 하는 경우가 많기 때문입니다.

이 블로그 포스트에서는 자바스크립트의 정규식을 활용하여 URL을 구성 요소별로 파싱하는 방법에 대해 알아보겠습니다.

URL 파싱

URL을 구성하는 요소는 다음과 같습니다.

프로토콜(protocol)
호스트(host)
포트(port)
경로(path)
쿼리 매개변수(query parameters)
프래그먼트(fragment)

이런 요소들을 개별적으로 추출하기 위해 정규식을 사용할 수 있습니다.

자바스크립트 정규식으로 URL 파싱

아래의 예제 코드는 URL을 구성 요소별로 파싱하는 함수를 보여줍니다.

function parseUrl(url) {
  const regex = /^(\w+):\/\/([^\/:]+):?(\d*)?([^?#]*)(\?([^#]+))?(#(.*))?/;
  const matches = url.match(regex);
  return {
    protocol: matches[1],
    host: matches[2],
    port: matches[3] || 'defaultPort',
    path: matches[4],
    query: matches[6],
    fragment: matches[8]
  };
}

이 함수는 정규식을 사용하여 URL을 구성 요소별로 추출합니다.

정규식 상세 설명

위의 정규식 /^(\w+):\/\/([^\/:]+):?(\d*)?([^?#]*)(\?([^#]+))?(#(.*))?/은 다음과 같은 패턴을 가지고 있습니다.

^ : 문자열의 시작
(\w+) : 프로토콜
:\/\/ : ://
([^\/:]+) : 호스트
:?(\d*)? : 포트
([^?#]*) : 경로
(\?([^#]+)) : 쿼리 매개변수
(#(.*)) : 프래그먼트

결론

이러한 정규식을 사용하면 URL을 구성 요소별로 쉽게 파싱할 수 있습니다. 이를 통해 웹 애플리케이션에서 URL을 다루는 데 유용한 도구로 활용할 수 있을 것입니다.

참고 자료

이상으로 자바스크립트 정규식을 활용한 URL 파싱에 대한 블로그 포스트를 마치도록 하겠습니다. 감사합니다.