정규표현식-시분초

https://regex101.com/

regex101: build, test, and debug regex

 

1. 다음 정규식은 hh:mm:ss 형태의 시, 분, 초에 일치되면, 콜론은 선택사항이다.

 

^(2[0-3]|[01][0-9]):?([0-5][0-9]):?([0-5][0-9])$

정규식 옵션 : 없음  정규식 스타일 : .NET, Java, JavaScript, PCRE, Perl, Python, Ruby

^(?<hour>2[0-3]|[01][0-9]):?(?<minute>[0-5][0-9]):?(?<second>[0-5][0-9])$

정규식 옵션 : 없음  정규식 스타일 : NET, Java 7, XRegExp, PCRE 7, Perl 5.10, Ruby 1.9​

 

예) 자바스크립트

 

 

[match]​      

17:21:09

172109

17:2109

1721:09​

 

[not match]​

17:1

17:21:60

 

 

https://m.blog.naver.com/javaking75/220081032637

[정규표현식] 유효성검사 - ISO 8601 날짜와 시간

 

 

---

ex)

17:13:11 

시: 분: 초

 

정규식 :  \B(?=(\d{2})+(\d))

 

핵심 코드 :   fns = fns.toString().replace(/ \B(?=(\d{2})+(\d))/g, ":");

 

코드 ( 시:분:초 유효성 검사)

function numChk(e){

var fns = e.value;    // input 박스에 입력된 입력값을 fns 변수에 넣음 

fns = fns.replace(/:/gi , "");     // 입력값(fns)에  : 을 제거 해서 fns 변수에 다시 넣기

var reg = /^[0-9]*$/;     // 숫자 0~9 정규식



if (!reg.test(fns)) {    // 변수 reg에 담은 정규표현식을 입력값 테스트를 했을때 참이 아니라면 >> 즉, 숫자가 아니라면

    $(e).val(""); // 입력값에 숫자가 아닌 값은 제거 처리 >> 즉, 숫자 아닌 값이 들어가면 즉각적으로 제거 된다.

    alert("숫자만 입력해주시기 바랍니다.");       // 그 후 숫자만 입력해달라는 알림창을 띄운다.

} else {    // 정확하게 숫자만 입력했을경우!! 실행되는 코드

    fns = fns.toString().replace(/ \B(?=(\d{2})+(\d))/g, ":");  // 2개씩 숫자가 입력되고 그 후 : 이 찍힌다.  이렇게 찍힌 값을 fns변수에 넣어준다.

    $(e).val(fns);           // 해당 fns 값을 다시 input 입력값에 넣어준다.

}

function numChk(e){

var fns = e.value;    // input 박스에 입력된 입력값을 fns 변수에 넣음 

fns = fns.replace(/:/gi , "");     // 입력값(fns)에  : 을 제거 해서 fns 변수에 다시 넣기

var reg = /^[0-9]*$/;     // 숫자 0~9 정규식

 

if (!reg.test(fns)) {    // 변수 reg에 담은 정규표현식을 입력값 테스트를 했을때 참이 아니라면 >> 즉, 숫자가 아니라면

    $(e).val(""); // 입력값에 숫자가 아닌 값은 제거 처리 >> 즉, 숫자 아닌 값이 들어가면 즉각적으로 제거 된다.

    alert("숫자만 입력해주시기 바랍니다.");       // 그 후 숫자만 입력해달라는 알림창을 띄운다.

} else {    // 정확하게 숫자만 입력했을경우!! 실행되는 코드

    fns = fns.toString().replace(/ \B(?=(\d{2})+(\d))/g, ":");  // 2개씩 숫자가 입력되고 그 후 : 이 찍힌다.  이렇게 찍힌 값을 fns변수에 넣어준다.

    $(e).val(fns);           // 해당 fns 값을 다시 input 입력값에 넣어준다.

}

 

---

시분초를 나타내는 정규표현식은 다음과 같이 작성할 수 있습니다. 이 정규표현식은 시간 유효성을 검사하는 데 도움이 됩니다.

 

regexCopy code
^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$

 

이 정규표현식은 다음과 같은 패턴을 갖습니다:

• ^와 $: 문자열의 시작과 끝을 나타냅니다.
• (?: ... ): 비캡처 그룹을 나타냅니다.
• [01]\d: 0부터 19까지의 숫자를 나타냅니다. 시간은 0부터 23까지의 값을 가져야 하므로 0부터 1로 시작하는 두 자릿수 숫자를 허용합니다.
• 2[0-3]: 20부터 23까지의 숫자를 나타냅니다.
• :[0-5]\d: 분과 초를 나타내며, 각각 00부터 59까지의 값을 허용합니다.

이 정규표현식을 사용하면 "hh:mm:ss" 형식의 문자열이 시간 유효성을 지키는지 확인할 수 있습니다.

 

---

입력된 시분초 숫자를 시분초 를 나타내며, 시간유효성을 지키는 정규표현식 으로 대체하는 자바스크립트

 

> 시분초 숫자를 시분초를 나타내며 시간 유효성을 지키는 형식으로 대체하려면 JavaScript에서 정규 표현식을 사용하여 문자열을 변환해야 합니다. 아래의 JavaScript 코드는 시분초 숫자를 유효성을 가진 시분초 형식으로 변환하는 예시입니다.

function formatTime(input) {
  // 시분초 형식을 나타내는 정규표현식
  var regex = /^(\d{2})(\d{2})(\d{2})$/;
  
  // 입력된 문자열을 검사하고, 유효한 경우 변환
  if (regex.test(input)) {
    return input.replace(regex, '$1:$2:$3');
  } else {
    return "유효하지 않은 입력입니다.";
  }
}

// 예시 사용
var input = "123456"; // 시분초 숫자로 표현
var formattedTime = formatTime(input);
console.log(formattedTime);

이 코드는 formatTime 함수를 사용하여 시분초 숫자를 유효한 시분초 형식으로 변환합니다. regex 변수에 정규표현식을 정의하고, regex.test(input)를 사용하여 입력된 문자열이 유효한지 확인합니다. 유효한 경우, replace 함수를 사용하여 형식을 변환하고 반환합니다. 그렇지 않은 경우 "유효하지 않은 입력입니다." 메시지를 반환합니다.

 

---

 

 JavaScript 코드는 입력된 값에서 콜론(:)을 제거하고 숫자만 포함되어 있을 경우 두 자리 숫자 뒤에 콜론을 추가하고 해당 숫자는 시간 유효성을 지키는 기능

>아래의 JavaScript 코드는 입력된 값에서 콜론(:)을 제거하고, 숫자만 포함되어 있을 경우 두 자리 숫자 뒤에 콜론을 추가하고 해당 숫자가 시간 유효성을 준수하는지 확인하는 기능을 수행합니다:

function formatTime(input) {
  // 콜론(:)을 제거
  var cleanedInput = input.replace(/:/g, '');

  // 정확히 6자리 숫자인지 확인
  if (/^\d{6}$/.test(cleanedInput)) {
    // 두 자리 숫자 뒤에 콜론(:) 추가
    var formattedTime = cleanedInput.replace(/(\d{2})(\d{2})(\d{2})/, '$1:$2:$3');

    // 시간 유효성 검사 (올바른 시간 값인지 확인)
    var timeParts = formattedTime.split(':');
    var hours = parseInt(timeParts[0], 10);
    var minutes = parseInt(timeParts[1], 10);
    var seconds = parseInt(timeParts[2], 10);

    if (hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59 && seconds >= 0 && seconds <= 59) {
      return formattedTime; // 유효한 시간 값이면 반환
    }
  }

  return "유효한 시간 형식이 아닙니다.";
}

// 예시 사용
var input = "123456"; // 시분초 숫자로 표현
var formattedTime = formatTime(input);
console.log(formattedTime);

위의 코드에서, formatTime 함수는 입력값에서 콜론을 제거하고, 6자리 숫자로 구성되어 있는지 확인합니다. 그런 다음, 숫자를 시간, 분, 초 부분으로 나누어 시간 유효성을 검사하고, 유효한 경우 콜론이 추가된 형식으로 반환합니다. 유효하지 않은 입력의 경우 "유효한 시간 형식이 아닙니다."를 반환합니다.

 

 

====> 수정후 적용시켰던 스크립트

function formatTime(input) {

  var cleanedInput = input.value;
  
  // 콜론(:)을 제거
  var cleanedInput = input.replace(/:/g, '');

  
  // 만약 6자리 초과 입력시 그 이후 는 자르기.
  if(cleanedInput.length > 6){
  	cleanedInput = cleanedInput.substr(0,6);
  }
  
  
  // 정확히 6자리 숫자인지 확인
  if (/^\d{6}$/.test(cleanedInput)) {
    // 두 자리 숫자 뒤에 콜론(:) 추가
    var formattedTime = cleanedInput.replace(/(\d{2})(\d{2})(\d{2})/, '$1:$2:$3');

    // 시간 유효성 검사 (올바른 시간 값인지 확인)
    var timeParts = formattedTime.split(':');
    var hours = parseInt(timeParts[0], 10);
    var minutes = parseInt(timeParts[1], 10);
    var seconds = parseInt(timeParts[2], 10);

    if (hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59 && seconds >= 0 && seconds <= 59) {
      $(input).val(formattedTime); // 유효한 시간 값이면 반환
    }
    // 유효한 시간 형식이 아닐 경우 입력값 모두 제거 
    else{
    alert("유효한 시간 형식이 아닙니다.");
 	$(input).val("");
    } 
  }

  
}

// 예시 사용
var input = "123456"; // 시분초 숫자로 표현
var formattedTime = formatTime(input);
console.log(formattedTime);

 

입력창

<input type="text" id="srchTime" name="srchTime" onKeyup="formatTime(this)" maxlength="8"
placeholder = "HH:MM:SS" />

---

정규표현식 관련 참고 블로그

 

 

1.

https://velog.io/@sean2337/JavaScript-%EC%A0%95%EA%B7%9C%EC%8B%9D-%EC%9E%91%EC%84%B1-%EB%B0%A9%EB%B2%95