JavaScript의 replace() 메서드를 시용하여 Date 객체에서 날짜와 시간을 문자열로 변환하여 가져오는 함수를 생성하도록 하겠습니다.
먼저 replace() 메서드부터 알아보겠습니다.
replace() 메서드
replace() 메서드는 문자열을 기준으로 pattern(교체할 문자열이나 정규식)과 일치하는 일부 또는 전체 부분을 replacement(교체할 문자열이나 교체 함수를 통한 교체 처리)로 교체하여 새로운 문자열을 반환합니다.
str.replace(pattern, replacement);// 대상 문자열과 교체할 문자열을 이용한 처리
var newStr = str.replace(substr, newSubstr);
// 정규식과 교체할 문자열을 이용한 처리
var newStr = str.replace(regexp, newSubstr);
// 정규식과 교체 함수를 이용한 처리
var newStr = str.replace(regexp, function);replace() 메서드에서 대상 문자열과 교체할 문자열 방식이나 정규식과 교체할 문자열 방식은 하나의 패턴만 교체되기 때문에 날짜와 시간처럼 여러 개를 변환하기에는 적합하지 않습니다.
그래서 정규식과 교체 함수를 이용하여 처리하도록 하겠습니다.
우선 간단하게 정규식과 교체 함수를 사용하여 어떻게 처리되는지 확인해보겠습니다.
대상 문자열이 "현재는 yyyy년도 입니다."이라면
- "yyyy" 대신 현재 년도도 변경하기 위해서는 'yyyy'를 정규식으로 처리해야 합니다.
- 교체 함수로 전달되는 match는 현재 추출된 정규식의 문자열로 "yyyy"입니다.
- 교체 함수에서 현재 년도를 얻어서 리턴하면 "yyyy"가 "2022"으로 변경됩니다.
그래서 대상 문자열이 "현재는 2022년도 입니다."으로 변경됩니다.
var str = "현재는 yyyy년도 입니다.";
var dateString = str.replace(/yyyy/g, function(match) {
console.log(match);
var date = new Date();
return date.getFullYear();
});
console.log(dateString);
--> yyyyy
--> 현재는 2022년도 입니다.
그럼 날짜 시간 포맷을 위해 정규식에 사용할 패턴을 정의하겠습니다.
Java의 SimpleDateFormat 클래스에서 사용하는 Date and Time Pattern를 사용하도록 하겠습니다.
Date and Time Pattern
YYYY : 년 --> getFullYear() 메서드로 처리
MM : 월 --> getMonth() 메서드로 처리 (2자리, 01 ~ 12)
dd : 일 --> getDate() 메서드로 처리 (2자리, 01 ~ 31)
HH : 시 --> getHours() 메서드로 처리 (24시간 표기, 01 ~ 23)
mm : 분 --> getMinutes() 메서드로 처리 (2자리, 00 ~ 59)
ss : 초 --> getSeconds() 메서드로 처리 (2자리, 00 ~ 59)
SSS : 밀리초 --> getMilliseconds() 메서드로 처리 (3자리, 001 ~ 999)
날짜, 시간 변환 함수 생성
정규식은 정규식의 그룹과 or를 사용하여 만듭니다.
(x) --> 그룹 : x를 그룹으로 처리
x|y --> or : x 또는 y 문자가 존재
다음은 날짜와 시간을 처리할 정규식입니다.
/(yyyy|MM|dd|HH|mm|ss|SSS)/g그룹으로 처리하지 않아도 됩니다.
매칭되는 패턴에 맞게 Date 객체의 메서드를 호출하여 가져오고 문자열을 생성하여 반환합니다.
function SimpleDateTimeFormat(date, pattern) {
var dateString = pattern.replace(/(yyyy|MM|dd|HH|mm|ss|SSS)/g, function(match) {
var matchString = "";
switch(match) {
case "yyyy":
matchString = date.getFullYear();
break;
case "MM":
matchString = date.getMonth() + 1;
break;
case "dd":
matchString = date.getDate();
break;
case "HH":
matchString = date.getHours();
break;
case "mm":
matchString = date.getMinutes();
break;
case "ss":
matchString = date.getSeconds();
break;
case "SSS":
matchString = date.getMilliseconds();
break;
default :
matchString = match;
break;
}
if (match == "SSS") {
if (matchString < 10) {
matchString = "00" + matchString;
} else if (matchString < 100) {
matchString = "0" + matchString;
}
} else {
if ((typeof(matchString) == "number" && matchString < 10)) {
matchString = "0" + matchString;
}
}
return matchString;
});
return dateString;
}
함수를 사용하여 날짜와 시간을 다양한 형태의 문자열로 처리할 수 있습니다.
console.log(SimpleDateTimeFormat(new Date(), "yyyy-MM-dd"));
--> 2022-03-13
console.log(SimpleDateTimeFormat(new Date(), "HH:mm:ss.SSS"));
--> 15:23:37.134
console.log(SimpleDateTimeFormat(new Date(), "yyyy-MM-dd HH:mm:ss.SSS"));
--> 2022-03-13 15:23:37.134
console.log(SimpleDateTimeFormat(new Date(), "yyyy년 MM월 dd일 HH시 mm분 ss초(SSS)"));
--> 2022년 03월 13일 15시 23분 37초(134)
console.log(SimpleDateTimeFormat(new Date(), "yyyyMMddHHmmssSSS"));
--> 20220313152337134
패턴 추가 처리
M : 월 --> getMonth() 메서드로 처리 (2자리, 1 ~ 12)
d : 일 --> getDate() 메서드로 처리 (2자리, 1 ~ 31)
H : 시 --> getHours() 메서드로 처리 (24시간 표기, 1 ~ 23)
hh : 시 --> getHours() 메서드로 처리 (12시간 표기, 01 ~ 12)
h : 시 --> getHours() 메서드로 처리 (12시간 표기, 1 ~ 12)
m : 분 --> getMinutes() 메서드로 처리 (2자리, 0 ~ 59)
s : 초 --> getSeconds() 메서드로 처리 (2자리, 0 ~ 59)
a : 오전/오후(AM/PM)
EEE : 풀 네임 요일 --> 일요일, 월요일, 화요일, 수요일, 목요일, 금요일, 토요일
eee : 숏 네임 요일 --> 일, 월, 화, 수, 목, 금, 토
M, d, H, h, m, s는 10 보다 작아도 앞에 "0"를 추가하지 않습니다.
요일과 오전/오후(AM/PM)는 한글로 처리하였습니다.
function SimpleDateTimeFormat(date, pattern) {
var days = ["일", "월", "화", "수", "목", "금", "토"];
var dateString = pattern.replace(/(yyyy|MM|M|dd|d|HH|H|hh|h|mm|m|ss|s|SSS|a|EEE|eee)/g, function(match) {
var matchString = "";
switch(match) {
case "yyyy":
matchString = date.getFullYear();
break;
case "MM":
case "M":
matchString = date.getMonth() + 1;
break;
case "dd":
case "d":
matchString = date.getDate();
break;
case "HH":
case "H":
matchString = date.getHours();
break;
case "hh":
case "h":
var hours = date.getHours() % 12;
matchString = (hours) ? hours : 12;
break;
case "mm":
case "m":
matchString = date.getMinutes();
break;
case "ss":
case "s":
matchString = date.getSeconds();
break;
case "SSS":
matchString = date.getMilliseconds();
break;
case "a":
matchString = (date.getHours() < 12) ? "오전" : "오후";
break;
case "EEE":
matchString = days[date.getDay()] + "요일";
break;
case "eee":
matchString = days[date.getDay()];
break;
default :
matchString = match;
break;
}
if (match == "SSS") {
if (matchString < 10) {
matchString = "00" + matchString;
} else if (matchString < 100) {
matchString = "0" + matchString;
}
} else {
if (match != "M" && match != "d" && match != "H" && match != "h" && match != "m" && match != "s"
&& match != "a" && match != "EEE" && match != "eee") {
if ((typeof(matchString) == "number" && matchString < 10)) {
matchString = "0" + matchString;
}
}
}
return matchString;
});
return dateString;
}
함수에 패턴을 추가하여 날짜와 시간을 다양한 형태의 문자열로 처리할 수 있습니다.
console.log(SimpleDateTimeFormat(new Date(), "yyyy-M-d H:m:s.SSS"));
--> 2022-3-13 15:24:1.032
console.log(SimpleDateTimeFormat(new Date(), "yyyy-M-d a hh:m:s.SSS"));
--> 2022-3-13 오후 03:24:1.032
console.log(SimpleDateTimeFormat(new Date(), "yyyy-M-d a h:m:s.SSS"));
--> 2022-3-13 오후 3:24:1.032
console.log(SimpleDateTimeFormat(new Date(), "yyyy년 M월 d일 EEE a h시 m분 s초"));
--> 2022년 3월 13일 일요일 오후 3시 24분 1초
console.log(SimpleDateTimeFormat(new Date(), "yyyy년 M월 d일 (eee) a h시 m분 s초"));
--> 2022년 3월 13일 (일) 오후 3시 24분 1초
영어권 처리는 직접 해보시기 바랍니다.