자주 사용하는 예제로 알아보는 정규 표현식 (웹사이트 주소)

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

자바스크립트 정규식을 활용하여 웹사이트 주소를 검증하는 소스입니다.

자바스크립트

function check_webSite() {

  var webSite = document.getElementById("webSite").value;

  var regWebSite = /^https?\:\/\/[\w\-\.]+[a-z]$/;

  if (regWebSite.test(webSite) == true) {

    alert("웹사이트 주소가 맞습니다.");

  }

}

 

HTML

<input type="text" id="webSite" name="webSite" />

<input type="button" onclick="check_webSite()" value="웹사이트 주소 확인" />

 

regWebSite에 작성한 정규식을 알아봅시다.
→ ^http : http로 시작해야 됩니다.
→ s? : s는 있어도 없어도 됩니다.
→ :\/\/ : :// 나와야 합니다. 특수기호(/)는 앞에 역슬래시(\)와 같이 사용합니다. 
→ [\w\-\.]+ : 영어, 숫자, 언더바(_), 하이픈(-), 닷(.)으로 이루어진 1회 이상의 문자열이 있어야 합니다.

→ [a-z]$ : 알파벳 소문자로 끝나야 합니다.


위 조건을 만족하면 regWebSite.test(webSite)를 통과하여 true라는 값을 반환하여 alert를 보여 줍니다.

 

regWebSite에 작성한 정규식의 다른 표현

var webSite = /https?:\/\/[\w\-\.]+/;

var webSite = /^(https?:\/\/)?(\w)+(\.\w+)+$/;

 

아래 사이트는 정규식을 테스트 할 수 있는 사이트입니다.

https://regexr.com/

RegExr: Learn, Build, & Test RegEx