Question

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

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

我需要将0900和1900作为一个类，所以我可以添加一些CSS来填充一个栏。这工作正常，但它也将其作为开始和结束时间导出，因此您可以看到＆＃39; 0900＆＃39;和＆＃39; 1900＆＃39;在前端。我想把这些字符串分开，这样我就可以添加一个＆＃39;：＆＃39;用Javascript后的第二个整数。因此，通过这种方式，字符串将显示为：＆＃39; 09：00＆＃39;和＆＃39; 00＆＃39;在前端。

我对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

您可以选择包含类的所有元素，然后添加如下

＆＃13;

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)
})

＆＃13;

<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>

＆＃13;

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迭代器。

＆＃13;

const addColon = el => el.innerText = el.innerText.replace(/(\d){2}$/, ":$&");

const timeStamps = document.querySelectorAll("span[class*='-hour']");

timeStamps.forEach(stamp => addColon(stamp));

＆＃13;

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

＆＃13;

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

5 个答案: