Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 URL 주소 유효성 검사하는 방법 완벽 가이드

JavaScript로 URL 주소 검증하기

웹 개발을 하다 보면 사용자가 입력한 URL이 올바른 형식인지 확인해야 하는 경우가 자주 발생합니다. JavaScript에서는 정규 표현식(Regex)을 활용하여 URL의 유효성을 간편하게 검사할 수 있습니다.

정규 표현식 패턴은 프로토콜(http/https), 도메인 이름, IP 주소(v4), 포트 번호, 쿼리 문자열, 해시(#) 등 URL의 다양한 구성 요소를 체계적으로 검증합니다. 검사 결과는 유효한 URL일 경우 true, 그렇지 않으면 false를 반환합니다.

정규 표현식 패턴의 구성 요소

  • 프로토콜: http 또는 https 여부 확인 (선택 사항)
  • 도메인 이름: 알파벳, 숫자, 하이픈으로 구성된 도메인 검증
  • IP 주소: IPv4 형식(예: 192.168.0.1) 지원
  • 포트 번호: 콜론(:) 뒤에 오는 포트 검사
  • 쿼리 문자열: 물음표(?) 이후의 매개변수 검증
  • 해시: 샵(#) 이후의 앵커 부분 검증

예제 코드

아래 예제는 정규 표현식을 사용하여 URL 유효성을 검사하는 함수입니다. 직접 실행해 보세요!

<!DOCTYPE html>
<html>
   <body>
      <script>
         var myURL;
         function validURL(myURL) {
            var pattern = new RegExp('^(https?:\\/\\/)?'+ // 프로토콜
            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2}|'+ // 도메인 이름
            '((\\d{1,3}\\.){3}\\d{1,3}))'+ // IPv4 주소
            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // 포트
            '(\\?[;&amp;a-z\\d%_.~+=-]*)?'+ // 쿼리 문자열
            '(\\#[-a-z\\d_]*)?$','i');
            return pattern.test(myURL);
         }
         document.write(validURL("https://qries.com"));
      </script>
   </body>
</html>

실행 결과

true

위 코드에서 validURL("https://qries.com") 함수를 호출하면 해당 URL이 유효한 형식이므로 true가 출력됩니다. 만약 잘못된 형식의 URL(예: "htp:/잘못된주소")을 전달하면 false가 반환됩니다.

추가 팁: URL API 활용하기

모던 브라우저 환경에서는 내장 URL 생성자를 사용하는 방법도 있습니다. 다음과 같이 try-catch 문으로 간단히 검증할 수 있습니다.

function isValidURL(url) {
  try {
    new URL(url);
    return true;
  } catch (e) {
    return false;
  }
}

정규 표현식 방식은 세부적인 패턴 제어에 유리하고, URL API 방식은 코드가 간결하고 표준을 따른다는 장점이 있습니다. 프로젝트의 요구 사항에 맞게 적절한 방법을 선택하세요.