Javascript：在字符串的第二个字符后添加整数

Question

我的CMS将字符串导出到span元素中，如下所示：

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

我需要将0900和1900作为一个类，因此可以向其中添加一些CSS来填充一个栏。 这工作正常，但也将其导出为开始时间和结束时间，因此您在前端看到“ 0900”和“ 1900”。 我想将这些字符串拆分开，以便可以在使用Javascript的第二个整数之后添加一个“：”。 因此，以这种方式，字符串在前端显示为：“ 09:00”和“ 19:00”。

我对Javascript的了解非常基础，所以我不知道如何开始。 帮助将不胜感激。

Answer 1

创建一个可重用的函数，该函数将返回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> 

但是，如果您的跨度中没有正好四个字符长的hhhh ，请使用以下命令：

 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> 

Answer 2

您可以选择带有类的所有元素，然后像下面这样添加

 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> 

Answer 3

从Ankit的答案中，我使代码几乎没有dynamic来满足4 digits和3 digits时间示例，并添加了两个代码。

 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> 

Answer 4

由于您的时间始终为4个字符，因此可以很容易地将字符串切成薄片，放在：中，然后将它们放在一起。

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

Answer 5

addColon函数接受一个element并将其innerText设置为其自身，但在最后两位数字之前插入一个冒号。

使用任何想要选择span元素并将其传递给addColon 。 我已经使用了querySelector和forEach迭代器。

 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>