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

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

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

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.

Impossible d'afficher le caractère '<'

JavaScript

Discussions similaires

Partager

Partager