普段は別に必要もないことかと思いますが、GoogleのBloggerや、何かしらのサービスを利用する際に日付が日本のそれとは違っていたりした場合、それらを日本式に直したいわけです。
一般的には、表示されているテキストを正規表現で数字だけ抜き出したり、年月日がスラッシュ(/)で区切られている場合はそれをsplitして、
dateText = "2024/06/25";
const [year, month, day] = dateText.split("/");
console.log(`year: ${year} | month: ${month} | day: ${day}`);
//year: 2024 | month: 06 | day: 25こんなふうにもできますし、漢字などが混じっていた場合、
const dateText = "2024年06月25日";
function convertJDate(dateText) {
const reg = /(\d{4})年(\d{2})月(\d{2})日/;
const matches = dateText.match(reg);
if (matches) {
const days = {
year: matches[1],
month: matches[2],
day: matches[3]
};
return days;
} else {
return dateText;
}
}
const days = convertJDate(dateText);
console.log(`year: ${days.year} | month: ${days.month} | day: ${days.day}`);
//year: 2024 | month: 06 | day: 25例えばこんなふうにとても面倒くさいです。
言うて日本語式なので変換する必要はないけれども、2024/06/25としたい場合はやはり数値だけを抜き出す必要があり、それなら最初からスラッシュで区切ってくれていたほうが何かと数値が取り出しやすくて便利とは思いつつ、そうはできない場合などの話なので、とても限定されたケースでの話です。
Date.parseとtoLocaleDateStringを使う
書いたまんまですが、これらを使うと次のように書けます。
const string = "2024年06月25日";
const parseDate = new Date(Date.parse(string));
const jDateText = parseDate.toLocaleDateString("ja-JP");
console.log(jDateText)
// 2024/06/25とても面倒くさくないです。
stringが例えば、2021-11-28T02:25:00+09:00であれば、2021/11/28と出力されます。6/23/2024と英語式であった場合は、2024/6/23と日本語式に出力されます。
多くの場合、海外のブログなどでは
<time datetime="2021-11-28T02:25:00+09:00">11/28/2021</time>となっていたりします。この場合は、time要素のtextContentでもgetAttributeでdatetimeを取得してもどちらでもパースできます。
Date.parse()メソッドは、日時を表す文字列を解釈し、協定世界時 (UTC) 1970 年 1 月 1 日 00:00:00 からの経過時間を表すミリ秒単位の数値を返します。または、文字列を解釈できなかったり不正な日付（例えば 2015-02-31）が指定されたりした場合はNaNを返します。
Date.parse() - JavaScript | MDN
とあるように、何でもかんでもいけるわけでもなく、正しい日付、またはそれらを出力したものでないと使用できません。そのためもし値が不正である場合(存在しない日付やフォーマット)には、それらを予め正しておく必要性があります。GMTやUTCを出力する何かしらであれば正しい日付を出力しているのではないかと思いますが本当に正しいかどうかは確かめる必要があります。
一部のブラウザでは処理されても違うブラウザではNaNを返すなどがある場合があります。今回は英語式の日付を日本式の日付に直すための話なので触れませんが、その逆は使用する機会がありえる話なので、.toISOString()などでどこでも誰が扱っても正しい時刻表記を<time datetime>や、何かしらでタグのtextContentだけでなくプロパティとして忍ばせておくのが良いかと思います。
bloggerの場合は、それらタグがあって投稿した日やアップデートした日を取得でき、またtimeタグにも値が忍ばせてありますのでこれらパースの値を正しく取得することができます。
Date.prototype.toLocaleDateString() - JavaScript | MDNは、optionの指定がない場合、日本式の場合スラッシュで日付が返ってきたと思います。また日付の数値はnumericで2024のような表記で返ってきます。2-digitなら24で返ってきます。
このoptionの指定と、元になるテキストがどういったものであるかさえ設定できれば諸々の面倒くさい部分が楽になるので上手く利用したい所です。
これらをあわせて
const toJPdate = (string) => {
const parseDate = new Date(Date.parse(string));
const option = {
year: "numeric",
month: "2-digit",
day: "2-digit" //,
//weekday:'short'
};
return parseDate.toLocaleDateString("ja-JP", option);
};このような関数を作り、
<div class="postDate">
<time>6/23/2024</time>
</div>というようなhtmlの日付を、
document.addEventListener("DOMContentLoaded", () => {
const postDate = document.querySelectorAll(".postDate time");
[...postDate].forEach((post) => {
const postText = post.textContent;
const jpTime = toJPdate(postText);
//ここに出力する処理
/* 上書きするなら
post.textContent = jpTim/
});
});と言う感じにすると、変換したものを上書きできます。どこから日付を得るかなどhtmlの構造で色々変わってきます。
また、
<div class="postDate">
<time class="published" datetime="2024-06-24T15:40:00+09:00">06/24/2024</time>
</div>もし、このようにhtml部分にdatetimeが入っていた場合は、
document.addEventListener("DOMContentLoaded", () => {
const postDate = document.querySelectorAll(".postDate time");
[...postDate].forEach((post) => {
//const postText = post.textContent;
const postText = post.getAttribute("datetime");
const jpTime = toJPdate(postText);
//ここに出力する処理
/* 上書きするなら
post.textContent = jpTime;
*/
});
});などとして読み込めばいけます。
最も、この場合は、
//仮にhtmlのテキストを説明用に便宜上置き換えてtextとして、
const text = "2024-06-24T15:40:00+09:00";
const [year, month, day] = text.split("T")[0].split("-");
console.log(`year: ${year}, month: ${month}, day: ${day}`);
// year: 2024, month: 06, day: 24これでいけるので別に今回の方法を使用する必要はないのですが。ただ、出力フォーマットもoptionで設定できるtoLocaleDateString()はある意味便利かもしれません。
言うて、上記方法から
const jdate = `${year}年${month}月${day}日`;とすれば良いだけのことで、日付の数値が取得できているので好きなようにして出力できるのですけれども。