Impossible d'afficher le caractère '<'

hel22 · 25/02/2011, 16h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.write(String.fromCharCode(60));

Mais par exemple la suivante affichera correctement "<" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Bovino · 25/02/2011, 16h41

Bah c'est normal, < dans un document HTML correspond à un début de balise et n'est pas affiché, il faut utiliser "<".

andry.aime · 25/02/2011, 17h18

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

A+.

SpaceFrog · 25/02/2011, 17h19

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Bovino · 25/02/2011, 19h49

Citation:

Envoyé par SpaceFrog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ah oui, j'aime bien cette solution !

NoSmoking · 25/02/2011, 19h55

Citation:

Envoyé par SpaceFrog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Eric2a · 26/02/2011, 00h09

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ainsi par exemple...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Affichera

Gras Italique

au lieu de

Gras
Italique

SpaceFrog · 26/02/2011, 08h35

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sekaijin · 26/02/2011, 11h17

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

A+JYT

NoSmoking · 26/02/2011, 16h13

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

Sélectionner tout - Visualiser dans une fenêtre à part

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&egrave;te depuis HTML4, D&eacute;pr&eacute;ci&eacute;e depuis HTML3.2
</p>
<fieldset>
  <legend>Contenu balise XMP</legend>
  <!-- supprimer le e des &quote; -->
  <xmp id="initial"><p>&quote;l&rsquo;&eacute;t&eacute; sera <strong>Chaud</strong>&quote;<br><em>Stone &amp; 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&eacute; <b>textContent</b> et <b>innerText</b></legend>
  <b>textContent</b> support&eacute; par:
  <br>- FireFox
  <br>- Safari
  <br>- Chrome
  <br>- Opera
  <br><b>innerText</b> support&eacute; 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

25/02/2011, 16h41	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	Bah c'est normal, < dans un document HTML correspond à un début de balise et n'est pas affiché, il faut utiliser "<". __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

25/02/2011, 17h19	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	Code : Sélectionner tout - Visualiser dans une fenêtre à part document.body.appendChild(document.createTextNode('<')) __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	20

25/02/2011, 17h18	#3
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 126 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 126 Points : 7 270 Points : 7 270	Bonsoir, +1 Bovino Pourquoi un document.write mais pas un innerHTML? A+.
	00

26/02/2011, 11h17	#9
sekaijin Expert Confirmé Urbaniste Inscription : juillet 2004 Messages : 1 419 Détails du profil Informations personnelles : Sexe : Âge : 48 Localisation : France, Yvelines (Île de France) Informations professionnelles : Activité : Urbaniste Secteur : Santé Informations forums : Inscription : juillet 2004 Messages : 1 419 Points : 2 806 Points : 2 806	ce document.write devrait être retiré des prochaine version de JS ça enlèverait un bon paquet d'erreurs A+JYT
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email