"2019.12.04 23:00" 처럼 표기된 시간을 현재 시각을 기준으로 "13분 전" 처럼 변경하는 스크립트입니다.

아래 작성한 코드는 티스토리에 적용하는 용도로 작성한 코드인데, 시간 바꾸는 부분만 응용하시면 어디서든 사용하실 수 있지 싶네요.

function date() {
  const now = new Date().getTime();
  [...document.querySelectorAll(".date a")].forEach(a => {
      a.classList.add("abuseReport");
      a.parentNode.parentNode.appendChild(a);
  });
  //티스토리 댓글 신고 버튼 밖으로 뺴기
  [...document.querySelectorAll(".date")].forEach(a => {
      if (!a.classList.contains("modded")) {
          const text = a.innerText.trim(),
              date = new Date(text).getTime(),
              diff = (now - date)/1000,
              dayDiff = Math.floor(diff/86400);

          a.innerText = `${
              diff < 86400
              ? (
                  text.length > 13
                  //글자가 13자 초과면 보통 시간 정보가 있으니 13자 초과일 때만 n시간 전으로 표시
                  ? (
                      diff < 240 ? "방금" : diff < 3600 ? `${Math.floor(diff/60)}분 전` : `${Math.floor(diff/3600)}시간 전`
                  )
                  : (
                      "오늘"
                  )
              )
              : (
                  dayDiff < 7
                  ? `${dayDiff}일 전`
                  : (
                      dayDiff < 60
                      ? `${Math.floor(dayDiff/7)}주 전`
                      : (
                          dayDiff < 365
                          ? `${Math.floor(dayDiff/30.5)}개월 전`
                          : `${Math.floor(dayDiff/365)}년 전`
                      )
                  )
              )
          }`,
          a.classList.add("modded");
      }
  });
}

new Date()를 이용해 구한 현재 시각과 .date 내부에 적힌 시각을 빼 차이를 구하는 방법을 이용합니다.

참 기묘하게도 티스토리에선 댓글에 신고 버튼을 시간 표시하는 곳에 집어넣어서, 밖으로 빼는 작업을 따로 해줘야 정상적으로 작동합니다.
신고 버튼을 삭제해버리는 건 약관에 위배되니 참고해주세요.

new Date().getTime()은 밀리 초 단위를 사용하기에 1000을 나눠줘야 초 단위로 변경됩니다.

2019. 12. 31.이 공백 포함 13 글잔데, 이 글자 수를 초과하면 보통 2019. 12. 31. 12:21처럼 시/분도 함께 표시되니 13자를 초과하고 초의 차이가 4분(240초) 이하면 방금, 1시간(3,600초) 이하면 n분 전, 1일(86,400초) 이하면 n시간 전이라 표기합니다.
13자 이하에 1일 이하면 무조건 "오늘"로 표기합니다.

dayDiff은 초 단위로 변경한 시간을 다시 86400으로 나눈 값으로, 일 단위로 차이를 구합니다.
7일 미만이면 n일 전, 60일 미만이면 n주 전, 365일 미만이면 n개월 전, 365일을 넘어가기 시작하면 n년 전으로 표기합니다.

date()를 호출하는 방법으로 사용하시되, infinite scroll로 다음 페이지를 불러오거나, 티스토리의 "이전 댓글 더 보기"를 클릭했을 때 date()를 다시 호출하셔서 표기를 변경해주셔야 합니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)