Go to Qiita Advent Calendar 2024 Top
LoginSignup
Maminumemonta0706
@Maminumemonta0706 (もんた。)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

【JavaScript】時刻に関する正規表現について

Q&A

Closed

JavaScriptGo正規表現初心者

解決したいこと

00h00m00s表記の時間の扱いに困っています。
2つ解決したいことがあります。
１つは0h00m00sを00:00:00といった表記にしたいです。

2つは以下の画像の右側に表示されている時間を取得し、sumの部分に合計を表示させるようにしたいのです。（この画像で言うとsum=6h03m00sといった感じ）
正規表現で取得を試みてもうまくいきませんでした。
初歩的な質問で申し訳ないのですが、わかる方がいたらご教示お願いいたします。
スクリーンショット 2022-09-10 19.25.45.jpg

該当するソースコード

以下の{{.SubTime}}で時刻が1:00:00だったら1h0m0sで、0h0m5sだったら5sというフォーマットで渡されるようになっています。

 <div class="flex-content justify-content-space-between">
    <span>{{.Date}}</span>
    <!-- この下のsumにsubTimeの合計時間を表示したい。 -->
    <span class="subtime-sum">sum</span>
</div>

<a id="openModal" class="task-a">
  <div class="hidden">{{.ID}}</div>
  <li>
    <!-- 省略 -->
    <span class="task-content__time">
      <p class="task-content__time__subtime-{{.ID}}">{{.SubTime}}</p>
  </span>
  </li>
</a>

自分で試したこと

やったこととしてはわからないなりに正規表現をつかってh,m,sごとに数字を取得し、dのhourStr,minuteStr,secondStrに０埋めして代入する的なことを考えたのですがうまくいきませんでした。

const hourStr = subTime.match(/\d+\h/)
const minuteStr = subTime.match(/\d+m/)
const secondStr = subTime.match(/\d+s$/)


const d = new Date('2020-03-05T00:00:00');

var hourStr   = d.getHours().toString().padStart(2, '0');
var minuteStr = d.getMinutes().toString().padStart(2, '0');
var secondStr = d.getSeconds().toString().padStart(2, '0');
console.log(hourStr + ":" + minuteStr + ":" + secondStr);

初歩的な質問で申し訳ないのですが、何卒ご教示の程よろしくお願いいたします。

0

3Answer

itagagaki
@itagagaki

１つめの質問の解法の例を示します。
これで時分秒の値が配列foundに得られることが理解できれば、２つ目の質問の処理にもご自分でトライできるかと思います。

function convert(arg)
{
    const found = arg.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
    let h = found[1] ? found[1] : 0;
    let m = found[2] ? found[2] : 0;
    let s = found[3] ? found[3] : 0;
    let hh = h < 10 ? "0"+h : h;
    let mm = m < 10 ? "0"+m : m;
    let ss = s < 10 ? "0"+s : s;
    return hh+':'+mm+':'+ss;
}
console.log(convert('1h0m0s'));
console.log(convert('5s'));
console.log(convert('20m'));
2Like

Comments

  1. @Maminumemonta0706

    Questioner

    ありがとうございます！トライしてみます！
d4413
@d4413

時間の計算は、時分秒各単位の繰り上がりや繰り下がりが関わってくると自力で計算するのは途端に面倒になってくるので、Dateオブジェクトが使える部分はそれに任せてしまうと楽になります。

sample.html
<span class="subtime-sum">sum</span>
<hr>
<p class="task-content__time__subtime-1">3h3m0s</p>
<p class="task-content__time__subtime-2">3m0s</p>
<p class="task-content__time__subtime-3">0s</p>
<p class="task-content__time__subtime-4">30m0s</p>
<p class="task-content__time__subtime-5">1h30m0s</p>
<p class="task-content__time__subtime-6">1h0m0s</p>

<script>
const secToTimeString = n => {
  const p = new Date(n * 1000).toJSON().match(/\d+/g);
  if(n >= 86400) p[3] = Math.floor(n / 3600);
  return `${p[3]}:${p[4]}:${p[5]}`;
};

document.addEventListener('DOMContentLoaded', () => {
  let sum = 0;

  document.querySelectorAll('[class*=task-content__time__subtime]').forEach(e => {
    const m = e.textContent.match(/((\d+)h)?((\d+)m)?((\d+)s)?/);
    const second = (m[2]|0) * 3600 + (m[4]|0) * 60 + (m[6]|0);
    sum += second;
    e.textContent = secToTimeString(second);
  });

  document.querySelector('.subtime-sum').textContent = secToTimeString(sum);
});
</script>
2Like

Comments

  1. @Maminumemonta0706

    Questioner

    １と２の回答ありがとうございます！
    一度トライしてみます！
HalHarada
@HalHarada

時刻問題は一度、unixtime(1970/1/1起算)変換するとスッキリします。ケータイなのでコード割愛します。 因みに、vbaのdateは1900/1/1起算の日数です。mod,%余剰関数を利用するとキッカリ時刻が計算できますよ

0Like

Your answer might help someone💌

LoginSign Up