Modification d'une chaîne à une date en utilisant innerHTML/textContent/innerText ne fonctionnant pas dans Safari/IE/FF

J'ai un javascript qui change une chaîne de nombres dans un tableau en un format de date plus agréable avec/entre l'année mois et le jour. Jusqu'à présent, j'ai seulement réussi dans Chrome et j'ai essayé de le manipuler en utilisant innerHTML, innerText et contentText, tout va bien sur Chrome, mais pas d'autres navigateurs.Modification d'une chaîne à une date en utilisant innerHTML/textContent/innerText ne fonctionnant pas dans Safari/IE/FF

Mon Javascript ressemble à ceci:

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

}

Et voici le code html que je suis en train de manipuler:

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

S'il vous plaît aider! Je ne peux utiliser javascript pour résoudre ce problème, malheureusement pas jQuery.

Source

2015-09-24 teedubya

Première Je vous suggère de changer votre attribut 'id' pour commencer à partir de la lettre. [A-Za-z]. De cette façon, il devrait déjà être plus compatible, et je suggère de lire ici: valid id value.

Deuxième J'ai fait quelques changements dans votre code

J'ai fermé la mise en œuvre de formatForDate (que vous avez manqué).
J'ai ajouté un marqueur de fermeture pour la deuxième ligne du tableau (que vous avez également manqué)
J'ai supprimé les mots inutiles 'var'.

Troisième Puisque vous avez besoin d'un contenu texte de portée, vous devez utiliser Node.textContent au lieu de .innerHTML

Voici un exemple de travail:

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

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

Vérifié dans: Chrome, FF et IE9-11

EDIT En réponse à votre commentaire Ok puisque vous ne pouvez pas changer l'ID et il doit rester numérique. Vous pouvez utiliser la méthode document.getElementById directement avec ID numérique (pas besoin d'échapper). Je l'ai vérifié dans Chrome, FF et même IE9 voici un exemple:

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

Source

2015-09-24 21:10:26

Merci pour cela, était un peu saoule lors de la saisie de la question a donc manqué un couple de tags. Suppression des vars inutiles, j'ai déjà essayé textContent (j'ai écrit contentText dans ma question pour une raison quelconque ..). Votre code fonctionne bien jusqu'à ce que j'essaie d'utiliser un ID qui est un nombre. J'aimerais pouvoir changer l'identification mais malheureusement je ne peux pas accéder au HTML. Donc, le numéro ID semble être le problème et les caractères d'échappement ne semble pas fonctionner? – teedubya

Vous avez, j'ai ajouté une réponse pour cela. –

tout d'abord à l'aide document.querySelector va vous limiter automatiquement sur certains des navigateurs que vous pouvez utiliser. Voir CanIUse. Puisque vous ne saisissez que quelque chose par son identifiant, pourquoi ne pas simplement utiliser document.getElementById? Il a un support dans à peu près tous les navigateurs.

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.Testé dans Firefox, Chrome et IE 9

Quelques choses à noter:

ID sur un élément HTML doit pas commencer par un nombre. Here est une très bonne explication de ce qui devrait être utilisé.
Si votre chaîne de date n'est jamais indexée (c'est-à-dire que 09 s'affiche au lieu de 9), vous allez avoir un mauvais moment. InnerHTML ne saisit pas simplement le texte, il saisit aussi le ... HTML. Si votre DT a déjà plus de HTML à l'intérieur, vous allez être à nouveau malheureux.

Source

2015-09-24 21:24:16

Bravo pour cela, agaçant je ne peux pas contrôler le fait que l'ID est un nombre et il semble que cela puisse être le problème. L'utilisation de getElementByID serait bien pour cette solution, bien que j'ai remarqué que si j'essaie d'échapper des caractères sur "formatfordate" (# \\ 31 3113) il ne peut pas trouver l'ID et si je mets juste le nombre en formatfordate (ce que je comprends n'est pas recommandé du tout) alors ça marche dans Chrome mais pas d'autres navigateurs. – teedubya

Modification d'une chaîne à une date en utilisant innerHTML/textContent/innerText ne fonctionnant pas dans Safari/IE/FF

Répondre

Questions connexes