Convert time display from «00 h 00 m 00 s» to HH:MM:SS format (JavaScript)
Converting time display from 00 h 00 m 00 s to HH:MM:SS format in JavaScript. That is, from unit-based time duration format to a simple 24-hour clock:
| 00 h 00 m 00 s | Converted to HH:MM:SS |
|---|---|
| 11 h 22 m 33 s | 11 h 22 m 33 s |
| 1 h 22 m 33 s | 1 h 22 m 33 s |
| 22 m 33 s | 22 m 33 s |
| 2 m 33 s | 2 m 33 s |
| 33 s | 33 s |
| 3 s | 3 s |
HTML code:
<table>
<tr>
<th>00 h 00 m 00 s</th>
<th>Converted to HH:MM:SS</th>
</tr>
<tr>
<td>11 h 22 m 33 s</td>
<td class="cell">11 h 22 m 33 s</td>
</tr>
<tr>
<td>1 h 22 m 33 s</td>
<td class="cell">1 h 22 m 33 s</td>
</tr>
<tr>
<td>22 m 33 s</td>
<td class="cell">22 m 33 s</td>
</tr>
<tr>
<td>2 m 33 s</td>
<td class="cell">2 m 33 s</td>
</tr>
<tr>
<td>33 s</td>
<td class="cell">33 s</td>
</tr>
<tr>
<td>3 s</td>
<td class="cell">3 s</td>
</tr>
</table>
JavaScript code:
<script>
// Cells containing the time to convert
var cells = document.querySelectorAll('.cell');
for ( var cell of cells ) {
// Initial values for hours, minutes, and seconds
var hours = '00:';
var minutes = '00:';
var seconds = '00';
// Time in «00 h 00 m 00 s» format is converted into an array of elements containing its numeric portion.
var cell_content = cell.textContent;
cell_content = cell_content.replace(/[^0-9\s]/g,'').slice(0, -1);
var cell_content_array = cell_content.split(/\s+/);
cell_content_array.reverse();
// Seconds are converted from «00 s» to «01» or «11» format
if ( cell_content_array[0].toString().length == 1 ) {
seconds = '0' + cell_content_array[0];
} else {
seconds = cell_content_array[0];
}
// Minutes, if there are any, are converted from «00 m» to «01» or «11» format
if ( 1 < cell_content_array.length ) {
if ( cell_content_array[1].toString().length == 1 ) {
minutes = '0' + cell_content_array[1] + ':';
} else {
minutes = cell_content_array[1] + ':';
}
}
// Hours, if there are any, are converted from «00 h» to «01» or «11» format
if ( 2 < cell_content_array.length ) {
if ( cell_content_array[2].toString().length == 1 ) {
hours = '0' + cell_content_array[2] + ':';
} else {
hours = cell_content_array[2] + ':';
}
}
// Time is converted from «00 h 00 m 00 s» to HH:MM:SS format
cell.textContent = hours + minutes + seconds;
}
</script>
Browser support
- Windows
- Edge 12.0+
- Firefox 3.5+
- Google Chrome 1.0+
- Opera 10.0+
- Linux
- Firefox 3.5+
- Google Chrome 1.0+
- Opera 10.0+
- iOS
- Safari 2.0+
- Android
- Samsung Internet 1.0+
- Chrome Android 18.0+
- Firefox for Android 4.0+
- Opera Android 10.1+