CODEWITHSUNDEEP
javascript
Alexander Pauwelyn
Alexander Pauwelyn

Reputation: 7

Javascript: add integer after second character of string

My CMS is exporting strings into a span element like this: 

<span class="starting-hour 0900">0900</span> - <span class="ending-hour 1900">1900</span>

I need the 0900 and 1900 as a class so I can add some CSS to them to fill up a bar. This is working fine, but it also exports it as the starting and ending hour so you see '0900' and '1900' in the frontend. I would like to split these strings up so I can add a ':' after the second integer with Javascript. So in this way the strings would be shown as: '09:00' and '19:00' in the frontend.

My knowledge of Javascript is very basic so I don't know how to get this started. Help would be appreciated.

Upvotes: 0

Views: 86

Answers (5)

Mudlabs
Mudlabs

Reputation: 579

The addColon function takes an element and sets its innerText to itself, but with the a colon inserted before the last two digits.

Use any method you want to select your span elements and pass them over to addColon. I've gone with a querySelector and a forEach iterator.

const addColon = el => el.innerText = el.innerText.replace(/(\d){2}$/, ":$&");

const timeStamps = document.querySelectorAll("span[class*='-hour']");

timeStamps.forEach(stamp => addColon(stamp));
<span class="starting-hour 0900">0900</span> - <span class="ending-hour 1900">1900</span>

Upvotes: 0

V&#246;r&#246;s Imi
V&#246;r&#246;s Imi

Reputation: 359

Since yout time is always 4 characters long, it makes it easy to slice the string, put in a : then put them together.

var str1 = "0900".slice(0,2);
var str2 = "0900".slice(2,4);
var time = str1 + ":" + str2;
alert(time);

Upvotes: 0

baao
baao

Reputation: 73241

You could select all elements with on of the classes, then add it like below

document.querySelectorAll('.starting-hour, .ending-hour').forEach(e => {
  e.innerText = e.innerText.padStart(4, 0);
  e.innerText = e.innerText.substring(0, 2) + ':' + e.innerText.substring(2)
})
<span class="starting-hour 0900">0900</span> - <span class="ending-hour 1900">1900</span>
<span class="starting-hour 0900">900</span> - <span class="ending-hour 1900">1900</span>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Create a reusable function that will return you the hour representation of the values in span:

function getHours(val){
  return val.substr(0,2)+':'+val.substr(2,4);
}

var start = document.querySelector('.starting-hour').innerText;
document.querySelector('.starting-hour').innerText = getHours(start);

var end = document.querySelector('.ending-hour').innerText;
document.querySelector('.ending-hour').innerText = getHours(end);
<span class="starting-hour 0900">0900</span> - <span class="ending-hour 1900">1900</span>

But, if you do not have exactly four character long hhhh in your span then use this:

function getHours(val){
  return val.substr(0,val.length-2)+':'+val.substr(val.length-2,val.length);
}

var start = document.querySelector('.starting-hour').innerText;
document.querySelector('.starting-hour').innerText = getHours(start);

var end = document.querySelector('.ending-hour').innerText;
document.querySelector('.ending-hour').innerText = getHours(end);
<span class="starting-hour 0900">900</span> - <span class="ending-hour 1900">1000</span>

Upvotes: 1

Sravan
Sravan

Reputation: 18647

Taking from Ankit's answer, I made code little dynamic to satisfy both 4 digits and 3 digits time example and added both codes.

function getHours(val){
  return val.substr(0,val.length - 2)+':'+val.substr(val.length - 2,val.length);
}

var start = document.querySelector('.starting-hour').innerHTML;
document.querySelector('.starting-hour').innerHTML = getHours(start);

var end = document.querySelector('.ending-hour').innerHTML;
document.querySelector('.ending-hour').innerHTML = getHours(end);


var start = document.querySelector('.starting-hour-two').innerHTML;
document.querySelector('.starting-hour-two').innerHTML = getHours(start);

var end = document.querySelector('.ending-hour-two').innerHTML;
document.querySelector('.ending-hour-two').innerHTML = getHours(end);
<span class="starting-hour 0900">0900</span> - <span class="ending-hour 1900">1900</span>

<br>
<br>

<span class="starting-hour-two 900">900</span> - <span class="ending-hour-two 100">100</span>

function getHours(val){
  return val.substr(0,val.length - 2)+':'+val.substr(val.length - 2,val.length);
}

var start = document.querySelector('.starting-hour').innerHTML;
document.querySelector('.starting-hour').innerHTML = getHours(start);

var end = document.querySelector('.ending-hour').innerHTML;
document.querySelector('.ending-hour').innerHTML = getHours(end);

var start = document.querySelector('.starting-hour-two').innerHTML;
document.querySelector('.starting-hour-two').innerHTML = getHours(start);

var end = document.querySelector('.ending-hour-two').innerHTML;
document.querySelector('.ending-hour-two').innerHTML = getHours(end);
<span class="starting-hour 0900">0900</span> - <span class="ending-hour 1900">1900</span>

<span class="starting-hour-two 900">900</span> - <span class="ending-hour-two 100">100</span>

Upvotes: 0

Related Questions