使用 innerHTML/textContent/innerText 将字符串更改为日期在 Safari / IE / FF 中不起作用

Question

我有一些 javascript 可以将 table 中的一串数字更改为更好看的日期格式，在年月日之间使用 /。到目前为止，我只在 Chrome 中取得了成功，并且我尝试使用 innerHTML、innerText 和 contentText 来操作它，在 Chrome 上都很好，但在其他浏览器上没有。

我的 Javascript 看起来像这样：

window.onload = function ()
{
var formatForDate = function(element) {
var originalText = element.innerHTML;
var year = originalText.substring(0,4);
var month = originalText.substring(4,6);
var day = originalText.substring(6,9);
element.innerHTML = [day, month, year].join('/');   

formatForDate(document.querySelector('#\31 3113'));

}

这是我正在尝试操纵的 html：

<table>
<tbody>
<tr><td>Something</td><td>Something</td></tr>
<tr><td>Something</td><td><span id='13113'>20150924</span></td>
</tbody>
</table>

请帮忙！我只能用 javascript 来解决这个问题，不幸的是没有 jQuery.

Answer 1

首先我建议将您的 'id' 属性更改为从字母开始。 [A-Za-z]。这样它应该已经更兼容了，我建议阅读这里：valid id value.

其次我对你的代码做了一些修改

我已经关闭了 formatForDate 实现（你错过了）。
我为第二 table 行添加了结束标记（您也错过了）
我删除了不需要的 'var' 个词。

Third 因为你需要一个来自span的文本内容，你应该使用Node.textContent而不是.innerHTML

这是一个工作示例：

window.onload = function (){
   var formatForDate = function(element) {
    var originalText = element.textContent,
     year = originalText.substring(0,4),
     month = originalText.substring(4,6),
     day = originalText.substring(6,9);
    element.textContent = [day, month, year].join('/');   
   }
    formatForDate(document.querySelector('#a'));
  }

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <script src="yourFile.js"></script>
</head>
<body>
 <table> 
  <tbody>
   <tr>
    <td>Something</td>
    <td>Something</td>
   </tr>
   <tr>
    <td>Something</td>
    <td><span id='a'>20150924</span></td>
   </tr>
  </tbody> 
 </table>
</body>
</html>

签入：Chrome、FF 和 IE9-11

编辑回复您的评论好的，因为您不能更改 ID，它必须保持数字。可以直接用数字ID使用document.getElementById方法（不用转义）。我已经在 Chrome、FF 甚至 IE9 中检查过了这是一个例子：

onload = function(){
            console.log(document.getElementById("13113").textContent);
        }//Checked in Chrome, FF, IE9+

Answer 2

首先，使用 document.querySelector 会自动限制您可以使用的某些浏览器。参见 CanIUse。既然你只是通过它的 id 来抓取东西，为什么不直接使用 document.getElementById？几乎所有浏览器都支持它。

function formatForDate(id) {
    var el = document.getElementById(id);
    var dateStr = el.innerHTML.trim();
    var year = dateStr.substr(0,4);
    var month = dateStr.substr(4,2);
    var day = dateStr.substr(6,2);
    el.innerHTML = day + '/' + month + '/' + year;
}

formatForDate('a13113');

js fiddle here. Tested in Firefox, Chrome, and IE 9

一些注意事项：

HTML 元素上的 ID 应该而不是以数字开头。 Here 很好地解释了应该使用什么。
如果您的日期字符串不是 0 索引（即 09 显示为 9），您将度过一段糟糕的时光。
innerHTML 不仅抓取文本，还抓取... HTML。如果你的 TD 里面有更多 html，你又会不高兴的。

使用 innerHTML/textContent/innerText 将字符串更改为日期在 Safari / IE / FF 中不起作用

Changing a string to a date using innerHTML/textContent/innerText not working in Safari / IE / FF

javascript

cross-browser

innerhtml

innertext