웹 애플리케이션을 개발하다보면 종종 URL이 유효한지를 검사해야 할 때가 있습니다. JavaScript에서는 정규 표현식을 사용하여 URL의 유효성을 검사할 수 있습니다. 이 글에서는 JavaScript를 이용한 URL 유효성 검사를 위한 정규 표현식을 알아보겠습니다.

URL 유효성을 검사하는 정규 표현식

JavaScript에서는 RegExp 객체를 사용하여 정규 표현식을 정의하고, test 메서드를 통해 URL의 유효성을 검사할 수 있습니다. 아래는 URL 유효성을 검사하는 간단한 정규 표현식 예제입니다.

const urlRegex = /^(https?|ftp):\/\/(-\.)?([^\s\/?\.#-]+\.?)+(\/[^\s]*)?$/i;
const url = "https://www.example.com";

if (urlRegex.test(url)) {
  console.log("유효한 URL입니다.");
} else {
  console.log("유효하지 않은 URL입니다.");
}

위 코드에서 urlRegex는 URL 유효성을 확인하기 위한 정규 표현식을 정의하고 있습니다. 정규 표현식은 test 메서드를 통해 url 변수에 저장된 URL의 유효성을 검사합니다.

정규 표현식 설명

이 정규 표현식은 일반적인 URL 형식의 유효성을 검사합니다. 다음은 정규 표현식의 각 부분에 대한 설명입니다.

• ^: 문자열의 시작
• (https?|ftp): “http”, “https”, “ftp” 중 하나와 매치
• :\/\/: “://” 문자와 매치
• (-\.)?: 하이픈 또는 마침표가 0 또는 1회 등장
• ([^\s\/?\.#-]+\.?)+: 공백, 슬래시, 마침표, 샵, 하이픈이 아닌 문자와 하나 이상의 마침표가 반복
• (\/[^\s]*)?: 슬래시로 시작하는 부분이 0 또는 1회 나타남
• $: 문자열의 끝
• i: 대소문자를 구분하지 않는다는 플래그

마무리

JavaScript를 사용하여 URL 유효성을 검사하는 정규 표현식에 대해 알아보았습니다. 이를 응용하여 웹 애플리케이션에서 사용되는 다양한 URL 유효성 검사에 활용할 수 있습니다.

더 많은 정보는 MDN web docs에서 확인할 수 있습니다.