JavaScript: convert string to different format

Question

I am designing a timer. For that i want to convert the value the user types in to the input to a different format.

like this:

120000 => 12:00:00

34233 => 3:42:33

this is the JavaScript i have now:

$('input#time').focusout(function(){ startTime = $(this).val(); //here code that converts to different format $('input#time').val(startTime); });

So, how do i convert it?

May i suggest that you put 3 input boxes instead of 1, one for each hours, minutes and seconds, then you can forget all the trouble that can come when users can freely put numbers. Each input will have its own min/max value making sure it converts to a real time ... this is how I would do it — Asons
– Asons, Commented Sep 23, 2015 at 15:12

blex · Accepted Answer · 2015-09-23 15:02:01Z

You can use Regex and split:

function convertTime(str){ return str.split(/(?=(?:..)*$)/).join(':'); }

Demo:

function convertTime(str) { return str.split(/(?=(?:..)*$)/).join(':'); } $('input#time').on('input',function() { startTime = $(this).val(); $('input#result').val(convertTime(startTime)); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="number" id="time" value="120000" /> <br/> <input id="result" value="12:00:00" />

You need to set a max of 6 numbers or time looks weird :) ... unless fractions is needed
@LGSon Yes, and also to prevent users from entering things like 328263
wow thank you! better than i expected. the type='number' property is also nice. I didn't even knew that existed.

andcl · Accepted Answer · 2015-09-23 15:10:07Z

If you are working in a timer, I suggest you to use the momentJS library (http://momentjs.com/docs/). It covers all of your current and future needs. In your specific situation, you should:

Download the plugin to your JS folder
Link the plugin in your HTML, like this:

<script src="path/to/your/JS/folder/moment.min.js" />
Convert the value using moment:

startTime = moment(startTime, "HHmmss").format("HH:mm:ss");

Pranav C Balan · Accepted Answer · 2015-09-23 15:19:37Z

You can do something like this

String.prototype.formatNumber = function() { return this.replace(/^((?:\d{1})?)((?:\d{2})+)$/, function(i, i1, i2) { return (i1.length ? i1 + ':' : '') + i2.match(/\d{2}/g).join(':'); }) }; $('#text').on('input', function() { $('#op').text(this.value.formatNumber()); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="text"/> <div id=op></div>

or

String.prototype.formatNumber = function() { return this.match(/^.(?=(.{2})+$)|.{2}/g).join(':') } $('#text').on('input', function() { $('#op').text(this.value.formatNumber()); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="text"/> <div id=op></div>

Dmitry Malinovsky · Accepted Answer · 2015-09-23 15:00:40Z

Having the time with following format, would be much easier: HH:MM:SS

String t= "15:30:18"; Time.valueof(t)

4thex · Accepted Answer · 2015-09-23 16:10:29Z

Something like this:

var input = "120000".split(""); var part; var result = ""; var count = 1; while(part = input.pop()) { result = part+result; if((count%2 === 0) && input.length>0) { result = ":"+result; } count++; }

Collectives™ on Stack Overflow

JavaScript: convert string to different format

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Related