Impossible d'afficher le caractère '<'

Version imprimable

25/02/2011, 16h36
hel22

Impossible d'afficher le caractère '<'
Bonjour,

Le caractère '<' est le numéro 60 dans la table ASCII. Dans un script, je n'arrive pas à afficher ce caractère à l'aide de la ligne suivante :
Code:

1 2 document.write(String.fromCharCode(60));
Mais par exemple la suivante affichera correctement "<" :
Code:

1 2 document.write("\""+String.fromCharCode(60)+"\"");
Notez que je peux sans problème afficher le signe > sans les guillemets ...

Avez-vous une idée ?

Merci beaucoup.
25/02/2011, 16h41
Bovino

Bah c'est normal, < dans un document HTML correspond à un début de balise et n'est pas affiché, il faut utiliser "<".
25/02/2011, 17h18
andry.aime

Bonsoir,
+1 Bovino
Pourquoi un document.write mais pas un innerHTML?

A+.
25/02/2011, 17h19
SpaceFrog

Code:

document.body.appendChild(document.createTextNode('<'))

;)
25/02/2011, 19h49
Bovino

Citation:

Envoyé par SpaceFrog

Code:

document.body.appendChild(document.createTextNode('<'))

;)

Ah oui, j'aime bien cette solution ! :)
25/02/2011, 19h55
NoSmoking

Citation:

Envoyé par SpaceFrog

Code:

document.body.appendChild(document.createTextNode('<'))

;)

effectivement, pour une fois cette méthode est bien utile, d'habitude elle pose plutôt des problèmes avec les entités HTML.

Salut,

Une petite fonction permettant de remplacer < par < et > par > d'une chaine.
Code:

1 2 3 4 function htmlspecialchars(s){ var text=(typeof s=='string')?s.replace(/\</g,'<').replace(/\>/g,'>'):''; return text; }
Ainsi par exemple...
Code:

1 2 var s='<p><strong>Gras<\/strong><br \/><em>Italique<\/em><\/p>'; document.getElementById('text').innerHTML=htmlspecialchars(s);
Affichera

<p><strong>Gras</strong><br /><em>Italique</em></p>
au lieu de

Gras
Italique

Le piste du replace est intéressante, mais il y a beaucoup plus simple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <body> dans un div par replace:<div id="text"></div> dans un div par texteNode:<div id="bar"></div><br/> dans un textarea<br/><textarea id="foo" style="border:0;width:600px; overflow-y:hidden" readonly value=""></textarea> <script type='text/javascript'> function htmlspecialchars(s){ var text=(typeof s=='string')?s.replace(/(.+)/,'<xmp>$1</xmp>'):s; return text; } var s='<p><strong>Gras</strong><br/><em>Italique</em></p>'; document.getElementById('text').innerHTML=htmlspecialchars(s); //ou document.getElementById('foo').value=s; document.getElementById('bar').appendChild(document.createTextNode(s)); </script> </body> </html>
A noter que la balise xmp était sortie de html ...
a noter que si l'on mets une balise xmp avec un id et que l'on essaye de lui coller un innerHTML, js sort une erreur inconnue ^^ il est donc préférable de l'éviter et de privilégier un input text ou un textarea

26/02/2011, 11h17
sekaijin

ce document.write devrait être retiré des prochaine version de JS
ça enlèverait un bon paquet d'erreurs

A+JYT

Citation:

Envoyé par SpaceFrog

A noter que la balise xmp était sortie de html ...
a noter que si l'on mets une balise xmp avec un id et que l'on essaye de lui coller un innerHTML, js sort une erreur inconnue ^^ il est donc préférable de l'éviter et de privilégier un input text ou un textarea

il est vrai que sur de balise de formatage, P, B, XMP on ne peut modifier, en règle générale surtout sur IE, le contenu avec innerHTML.
Mais en utilisant innerText ou textContent on obtint le même résultat avec n'importe quelle balise.

ci dessous une petit fichier de test
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[XMP textContent/innerText]</title> <style type="text/css"> * { font-family : Verdana; margin : 0; padding : 5px; } legend{ margin : 5px; background-color : #e0e0e0; } </style> </head> <body> <div> <h2>Balise XMP (exemple)</h2> <p>Obsolète depuis HTML4, Dépréciée depuis HTML3.2 </p> <fieldset> <legend>Contenu balise XMP</legend>  <xmp id="initial"><p>&quote;l’été sera <strong>Chaud</strong>&quote;<br><em>Stone & Charden</em></p></xmp> </fieldset> <br> <fieldset> <legend>Ecriture dans balise DIV avec <b>innerHTML</b></legend> <div id="sortie"></div> </fieldset> <br> <fieldset> <legend id="titre">balise ???</legend> <xmp id="new"></xmp> </fieldset> <br> <fieldset> <legend>Compatibilité <b>textContent</b> et <b>innerText</b></legend> <b>textContent</b> supporté par: <br>- FireFox <br>- Safari <br>- Chrome <br>- Opera <br><b>innerText</b> supporté par: <br>- IE <br>- Safari <br>- Chrome <br>- Opera </fieldset> </div> <script type='text/javascript'> var oDest, tag; var sTmp = document.getElementById('initial').innerHTML; if(( oDest = document.getElementById('sortie'))){ oDest.innerHTML = sTmp; } if(( oDest = document.getElementById('new'))){ tag = oDest.tagName; if( oDest.textContent !== undefined){ oDest.textContent = sTmp; sTmp = 'textContent'; } else { if( oDest.innerText !== undefined){ oDest.innerText = sTmp; sTmp = 'innerText'; } } if(( oDest = document.getElementById('titre'))){ oDest.innerHTML = 'Ecriture dans balise '+tag +' avec <b>' +sTmp +'</b>'; } } </script> </body> </html>
Je me suis permis d'intégrer l'entité HTML ", celle la même qui a valu une discussion légèrement houleuse il y a peu (" entre balises), la réponse est donc au final, c'est possible avec n'importe quelle balise.

Dans l'exemple donné il faut supprimer le e des &quote; ( problème avec l'éditeur)

Vous pouvez changer la nature de la balise sur cette ligne

Code:

<xmp id="new"></xmp>

Merci donc à SpaceFrog pour avoir déterré cette balise obsolète à l'origine de ce message.