Replace military time to normal time with Javascript - Stack Overflow

admin管理员组

文章数量:1341419

With this script

getFormattedTime = function (fourDigitTime){
var hours24 = parseInt(fourDigitTime.substring(0,2));
var hours = ((hours24 + 11) % 12) + 1;
var amPm = hours24 > 11 ? 'pm' : 'am';
var minutes = fourDigitTime.substring(2);

return hours + ':' + minutes + amPm;
};

I can change 4 digit time to normal clock time (there is a problem with 0930 though..)

And with this

$("body").html($("body").html().replace(/1135/g,'11:35am'));

To replace any occurange of 1135 in my page.

However, in my page, I have a list of time in tables. I need to convert them e.g.

Class starts at 1700, please be there by 1630 and sign in by 1645.

It should translate into

Class starts at 05:00pm, please be there by 04:30pm and sign in by 04:45pm.

With this script

getFormattedTime = function (fourDigitTime){
var hours24 = parseInt(fourDigitTime.substring(0,2));
var hours = ((hours24 + 11) % 12) + 1;
var amPm = hours24 > 11 ? 'pm' : 'am';
var minutes = fourDigitTime.substring(2);

return hours + ':' + minutes + amPm;
};

I can change 4 digit time to normal clock time (there is a problem with 0930 though..)

And with this

$("body").html($("body").html().replace(/1135/g,'11:35am'));

To replace any occurange of 1135 in my page.

However, in my page, I have a list of time in tables. I need to convert them e.g.

Class starts at 1700, please be there by 1630 and sign in by 1645.

It should translate into

Class starts at 05:00pm, please be there by 04:30pm and sign in by 04:45pm.

• javascript

Share Improve this question Follow asked Jan 19, 2013 at 15:02 Emerson FEmerson F 84533 gold badges1010 silver badges1919 bronze badges 5

• 3 What if the text is The class will have 1000 lessons. It will start at 1700, please be there by 1630 and sign in by 1645.? That would change to The class will have 10:00pm lessons. It will start... – tckmn Commented Jan 19, 2013 at 15:04
• 5 The parseInt function should always be passed a second argument to avoid the goofy octal interpretation of strings starting with "0". (The second argument should be 10 unless you know you're parsing strings representing a different base.) – Pointy Commented Jan 19, 2013 at 15:05
• noted that other text in the page will affect it, and I will try to resolve that later on. I can maybe put it encasing in elementID, e.g. <td id="militaryTime">1450</td> since it will be in td tags – Emerson F Commented Jan 19, 2013 at 15:15
• If you can control the HTML, why not just output the correctly formatted time in the first place? – Jesse Rusak Commented Jan 19, 2013 at 15:28
• Because due to the software we are using, it does not support time. The workaround is storing 24hr time so that our classes can be listed according to the assending 4 digit number. – Emerson F Commented Jan 19, 2013 at 15:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Assuming the only digits displayed in the text are the times you can use:

var txt = 'Class starts at 0845, please be there by 1630 and sign in by 1645.'

getFormattedTime = function (fourDigitTime) {
    var hours24 = parseInt(fourDigitTime.substring(0, 2),10);
    var hours = ((hours24 + 11) % 12) + 1;
    var amPm = hours24 > 11 ? 'pm' : 'am';
    var minutes = fourDigitTime.substring(2);

    return hours + ':' + minutes + amPm;
};
/* replace numeric entities*/
var newTxt = txt.replace(/(\d+)/g, function (match) {
    return getFormattedTime(match)
})
$('body').html(newTxt);

DEMO : http://jsfiddle/q6HC9/1

EDIT: Wrapping times in a tag would greatly simplify situation. Wrap all military times in a span with a mon class and then use the html() method

<span class="mil_time">0845</span>

getFormattedTime = function (fourDigitTime) {
    /* make sure add radix*/
    var hours24 = parseInt(fourDigitTime.substring(0, 2),10);
    var hours = ((hours24 + 11) % 12) + 1;
    var amPm = hours24 > 11 ? 'pm' : 'am';
    var minutes = fourDigitTime.substring(2);

    return hours + ':' + minutes + amPm;
};
/* find all spans and replace their content*/
$('span.mil_time').html(function( i, oldHtml){
   return getFormattedTime(oldHtml);
})

Use this:

var getFormattedTime = function (fourDigitTime){
    var hours24 = parseInt(fourDigitTime.substring(0,2), 10);
    var hours = ((hours24 + 11) % 12) + 1;
    var amPm = hours24 > 11 ? 'pm' : 'am';
    var minutes = fourDigitTime.substring(2);

    return hours + ':' + minutes + amPm;
};

s = "Class starts at 1700, please be there by 1630 and sign in by 1645.";

c = s.replace(/([^\d]*)([0-9]{4})([^\d]*)/g, function(match, p1, p2, p3) {
    return p1 + getFormattedTime(p2) + p3
});

console.log(c);

Output:

Class starts at 5:00pm, please be there by 4:30pm and sign in by 4:45pm. 

Update

In your case:

s = $("body").html();

c = s.replace(/([^\d]*)([0-9]{4})([^\d]*)/g, function(match, p1, p2, p3) {
    return p1 + getFormattedTime(p2) + p3
});

$("body").html(c);

Update 2

If you have the time inside <td class="fourDigitTime">1500</td>, then use this:

$(".fourDigitTime").each(function() {
    $(this).text(getFormattedTime($(this).text());
});

Live Demo

You can use word boundaries in your regular expression to match 4 digits, and then your getFormattedTime function as a replacement function to .replace:

$('body').html(function(_, old) {
    return old.replace(/\b\d{4}\b/g, getFormattedTime);
});

Please notice also the ments by @Doorknob and @Pointy. To replace only time "numbers", you will need to markup them semantically, for example with html5 <time> tags:

Class starts at <time>1700</time>, please be there by <time>1630</time> and sign in by <time>1645</time>.

$('time').text(function(_, old) {
    return getFormattedTime(old);
});

本文标签： Replace military time to normal time with JavascriptStack Overflow