JavaScript에서 URL 구문 분석하기
JavaScript에서 URL을 구문 분석할 때는 정규 표현식보다 DOM 메서드를 활용하는 것이 훨씬 간단하고 효율적입니다. 정규 표현식을 사용하면 코드가 복잡해지고 유지보수가 어려워지지만, DOM 메서드를 이용하면 단 한 번의 함수 호출만으로 파싱된 URL의 각 구성 요소를 손쉽게 얻을 수 있습니다.
아래 예제에서는 먼저 함수를 하나 정의하고, 그 안에서 DOM 메서드를 사용해 앵커 태그(<a>)를 생성합니다. 이후 매개변수로 전달받은 URL을 앵커 태그의 href 속성에 할당하면, 브라우저가 자동으로 해당 URL을 분석해 줍니다. 함수가 반환하는 객체에는 프로토콜, 호스트, 포트, 경로, 검색 문자열, 해시 등 URL의 각 부분이 담기며, 결과를 보기 좋게 출력하기 위해 JSON.stringify() 메서드를 사용했습니다.
예제 코드
<html>
<body>
<script>
function URL(url) {
var urlParser = document.createElement('a');
urlParser.href = url;
return {
protocol: urlParser.protocol,
host: urlParser.host,
hostname: urlParser.hostname,
port: urlParser.port,
pathname: urlParser.pathname,
search: urlParser.search,
hash: urlParser.hash
};
}
document.write(JSON.stringify(URL("https://www.youtube.com/watch?v=tNJJSrfKYwQ")));
</script>
</body>
</html>실행 결과
{"protocol":"https:","host":"www.youtube.com","hostname":"www.youtube.com","port":"","pathname":"/watch","search":"?v=tNJJSrfKYwQ","hash":""}출력 결과를 보면 전달된 URL이 프로토콜(https:), 호스트(www.youtube.com), 경로(/watch), 쿼리 문자열(?v=tNJJSrfKYwQ) 등으로 깔끔하게 분리된 것을 확인할 수 있습니다.
참고: 최신 브라우저라면 URL 생성자를 사용하세요
위 방식은 오래된 환경에서도 동작하는 유용한 기법이지만, 모던 브라우저에서는 표준으로 제공되는 URL 생성자(new URL())를 사용하는 것이 더 권장됩니다. 별도의 DOM 요소 생성 없이 동일한 정보를 바로 얻을 수 있습니다.
const url = new URL("https://www.youtube.com/watch?v=tNJJSrfKYwQ");
console.log(url.protocol); // "https:"
console.log(url.hostname); // "www.youtube.com"
console.log(url.pathname); // "/watch"
console.log(url.search); // "?v=tNJJSrfKYwQ"상황에 맞게 두 방법을 선택하면 되지만, 특별한 이유가 없다면 코드가 더 간결하고 직관적인 URL API를 사용하는 것이 좋습니다.