IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Impossible d'afficher le caractère '<'


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Inscrit en
    Août 2006
    Messages
    130
    Détails du profil
    Informations forums :
    Inscription : Août 2006
    Messages : 130
    Par défaut 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 : 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.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Bah c'est normal, < dans un document HTML correspond à un début de balise et n'est pas affiché, il faut utiliser "&lt;".
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonsoir,
    +1 Bovino
    Pourquoi un document.write mais pas un innerHTML?

    A+.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.body.appendChild(document.createTextNode('<'))
    Ma page Developpez - Mon Blog 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

    Venez sur le Chat de Développez !

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.body.appendChild(document.createTextNode('<'))
    Ah oui, j'aime bien cette solution !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    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.

  7. #7
    Membre Expert
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Par défaut
    Salut,

    Une petite fonction permettant de remplacer < par &lt; et > par &gt; 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
    <p><strong>Gras</strong><br /><em>Italique</em></p>
    au lieu de
    Gras
    Italique

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog 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

    Venez sur le Chat de Développez !

  9. #9
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    ce document.write devrait être retiré des prochaine version de JS
    ça enlèverait un bon paquet d'erreurs

    A+JYT

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    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 &quot;, celle la même qui a valu une discussion légèrement houleuse il y a peu (&quot; 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
    Merci donc à SpaceFrog pour avoir déterré cette balise obsolète à l'origine de ce message.

Discussions similaires

  1. [JpGraph] Impossible d'afficher une image (plein de caractères)
    Par thomasmds dans le forum Bibliothèques et frameworks
    Réponses: 3
    Dernier message: 29/04/2011, 14h53
  2. [BOXI R2] : Impossible d'afficher des caractères russes
    Par alexandre_71 dans le forum Administration-Migration
    Réponses: 1
    Dernier message: 24/09/2008, 11h03
  3. Réponses: 4
    Dernier message: 14/10/2005, 09h15
  4. Réponses: 2
    Dernier message: 21/07/2005, 14h20
  5. [EasyPHP]"impossible d'afficher la page"
    Par Nip dans le forum Apache
    Réponses: 3
    Dernier message: 07/04/2005, 21h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo