Afternoon Log

日々のことや、技術的な備忘録を吐き出していくつもり

timeタグの中身を書き換えただけの話

以前からarchive以下のページ(カテゴリや月別アーカイブでの遷移先ページ)の日付の表示がおかしかった。
なので、それを修正した。
やったことはすごく単純で

URL取得して、archiveの文字列含んでいるか見て、
あったらtimeタグ取得して、innerHTMLを置き換え。

一応以下に詳細をば。



まずURLの取得

<script>
    var url = window.location.toString();
</script>

この後文字列操作したいのでtoString()を忘れずに。


次はその文字列がarchiveを含んでいるか調べる。

<script>
    if (url.indexOf("archive") > -1) {
        // 処理
    }
</script>

indexOfは指定した文字列が何番目かを返す。
無ければ-1を返す。
なので、これ以外にも!= -1>= 0とかでも良いんじゃないかな。
最初、containとかあるかなーって思っていたんですが、無いのですね。


次は問題となっているtimeタグ取得。

<script>
    var times = document.getElementsByTagName("time");
    for (var i = 0; i < times.length; i++) {
        // 処理
    }
</script>

document.getElementsByTagName("time") によってtimeタグの要素配列が得られる。
今回は気にしなくて大丈夫だったけど、
全取得なので、場合によっては修正しなくて良い場所と分ける必要がある。

配列の要素を回してくれる、foreach的なのないかなーって思ったんですが
どうにも微妙そうなのばかりなので、普通のに落ち着いた。


最後に要素の書き換え。

<script>
    var timeArray = times[i].innerHTML.split("-");
        times[i].innerHTML = "<span class='date-year'>" + timeArray[0] + "</span><span class='date-month'>" + timeArray[1] + "</span><span class='date-day'>" + timeArray[2] + "</span>"
    }
</script>

今回問題だったのが、年・月・日と要素が別れておらず、
year-month-dayという形であったこと。
なのでsplitで区切り文字(-)を指定して分ける。
後はinnerHTMLに目的のHTMLを入れる。



まとめると、

<script>
    var url = window.location.toString();
    if (url.indexOf("archive") > -1) {
        var times = document.getElementsByTagName("time");
        
        for (var i = 0; i < times.length; i++) {
            var timeArray = times[i].innerHTML.split("-");
            times[i].innerHTML = "<span class='date-year'>" + timeArray[0] + "</span><span class='date-month'>" + timeArray[1] + "</span><span class='date-day'>" + timeArray[2] + "</span>"
        }
    }
</script>

このコードで

<time datetime="2017-01-31" title="2017-01-31">2017-01-31</time>

↑これが

<time datetime="2017-01-31" title="2017-01-31"><span class="date-year">2017</span><span class="date-month">01</span><span class="date-day">31</span></time>

↑こうなった