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

Question

I have some javascript which changes a string of numbers within a table to a nicer looking date format with /'s between the year month and day. So far I've only been successful in Chrome and I've tried to manipulate it using innerHTML, innerText and contentText, all fine on Chrome but no other browsers.

My Javascript looks like this:

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'));

}

And here is the html I am trying to manipulate:

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

Please help! I can only use javascript to solve this, unfortunately no jQuery.

score 2 · Accepted Answer · edited May 23 '17 at 12:24

First I suggest to change your 'id' attribute to start from letter. [A-Za-z]. This way it's already should be more compatible, and I suggest to read here: valid id value.

Second I've made a few changes in your code

I've closed the formatForDate implementation (that you missed).
I've added closing tag for second table row (that you also missed)
I've removed the unnecessary 'var' words.

Third Since you need a text content from span, you should use Node.textContent instead of .innerHTML

Here is a working example:

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>

Checked in: Chrome, FF and IE9-11

EDIT In reply to your comment Ok since you cannot change the ID and it must stay numeric. You can use the document.getElementById method directly with numeric ID (no need to escape). I've checked it in Chrome, FF and even IE9 here is an example:

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

Thanks for this, was a little drunk when typing question so missed a couple of tags. Removed unnecessary vars, I have tried textContent already (I wrote contentText in my question for some reason..). Your code works fine until I try and use an ID which is a number. I would love to be able to change the ID but unfortunately I can't access the HTML. So, the number ID seems to be the problem and escaping characters doesn't seem to be working? — teedubya, Sep 26 '15 at 10:21

score 2 · Answer 2 · edited May 23 '17 at 12:33

First of all using document.querySelector is going to automatically limit you on some of the browsers you can use. See CanIUse. Since you're only grabbing something by its id, why not just use document.getElementById? It has support in pretty much every browser ever.

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

Some things to note:

IDs on an HTML element should not begin with a number. Here is a very good explanation of what should be used.
If your date string ever isn't 0 indexed (i.e. 09 shows up as 9 instead) you're going to have a bad time.
innerHTML doesn't just grab the text, it also grabs the... HTML. If your TD ever had more html inside it, you're going to be unhappy again.

Cheers for this, annoyingly I can't control the fact that the ID is a number and it seems this may be the issue. Using getElementByID would be fine for this solution as well, though I've noticed that if I try and escape characters on "formatfordate" (#\\31 3113) it can''t find the ID and if I just put the number in formatfordate (which I understand is not recommended at all) then it works in Chrome but no other browsers. — teedubya, Sep 26 '15 at 10:29

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

2 Answers2