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

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

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

0900-1900

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

---

我的Javascript知识非常基础，所以我不知道如何开始。非常感谢您的帮助。

创建一个可重用函数，该函数将返回

span

中值的小时表示形式：

函数getHours（val）{
返回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）
0900-1900
创建一个可重用函数，该函数将返回
span
中值的小时表示形式：


函数getHours（val）{
返回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）
0900-1900
您可以选择所有打开类的元素，然后像下面那样添加它


document.querySelectorAll（'.start hour，.end hour'）.forEach（e=>{
e、 innerText=e.innerText.padStart（4,0）；
e、 innerText=e.innerText.substring（0,2）+'：'+e.innerText.substring（2）
})
0900-1900
900-1900
您可以选择所有的元素，其中的一个类是on，然后像下面那样添加它


document.querySelectorAll（'.start hour，.end hour'）.forEach（e=>{
e、 innerText=e.innerText.padStart（4,0）；
e、 innerText=e.innerText.substring（0,2）+'：'+e.innerText.substring（2）
})
0900-1900
900-1900
根据Ankit的答案，我制作了代码little
动态
，以满足
4位
和
3位
时间示例，并添加了两个代码


函数getHours（val）{
返回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）
0900-1900




900-100
根据Ankit的答案，我制作了一个小代码
动态
，以满足
4位
和
3位
时间示例，并添加了两个代码


函数getHours（val）{
返回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）
0900-1900




900-100
由于您的时间总是4个字符长，因此可以很容易地对字符串进行切片，放入：然后将它们放在一起

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

因为yout time总是4个字符长，所以可以很容易地将字符串切分，放入：然后将它们放在一起

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

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

使用任何方法选择
span
元素并将它们传递给
addColon
。我使用了
querySelector
和
forEach
迭代器


const addColon=el=>el.innerText=el.innerText.replace（/（\d）{2}$/，“：$&”）；
constamp timeStamps=document.queryselectoral（“span[class*='-hour']”）；
timeStamps.forEach（stamp=>addColon（stamp））
0900-1900
函数采用
元素
并将其
内部文本
设置为自身，但在最后两位之前插入冒号

使用任何方法选择
span
元素并将它们传递给
addColon
。我使用了
querySelector
和
forEach
迭代器


const addColon=el=>el.innerText=el.innerText.replace（/（\d）{2}$/，“：$&”）；
constamp timeStamps=document.queryselectoral（“span[class*='-hour']”）；
timeStamps.forEach（stamp=>addColon（stamp））
0900-1900
既然你没有告诉我们关于你的CMS的任何事情，我知道你在寻找JS的解决方案？因为在我看来，这个逻辑也应该包含在CMS中（添加了
：
），因为你没有告诉我们关于你的CMS的任何事情，我知道你在寻找JS中的解决方案？由于IMO此逻辑也应包含在CMS中（添加的
：
），因此假设小时的格式始终为
hhh
，而不是