Discussion :

[hellspawn_ludo]

Bonjour,

J'ai créé dynamiquement des balises P incrémentées (mot1, mot2...) en fonction d'une chaine de caractère.
Le but est de découper une chaine afin que je puisse jouer sur chaque mot en y attribuant des effets visuels.
En effet, j'aimerais que mes mots arrivent pas le bas de ma page un par un et viennent à la suite des autres afin qu'au final le texte soit lisible comme s'il était entièrement écrit dans un P.

Pour celà, aucun problème. En revanche, quand je fais le test, les mots s'affichent impeccablement à la suite des autres mais il n'y à aucun espace entre eux.

En conséquence, je vous demande si vous pourriez me dire comment insérer un espace avec &nbsp ou String.fromCharCode(32) à la fin de mes mots ?

Voici mon code JAVASCRIPT:

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
var j=1;
 
function decoupage_texte()
{
 
    var txt="";
    var regSeparateur=new RegExp("[ ]+", "g");      // Expression qui permet de découper une chaine de caractère dès que le caractère d'espacement est trouvé
    var texte="L'homme, ici, va lentement.";        // Le texte à découper
    var texte_decoup=texte.split(regSeparateur);    // Récupère tous les mots dans un tableau : texte_decoup
 
    for (var i=0; i<texte_decoup.length; i++)
    {
        txt=texte_decoup[i] + " ";  // le + " " NE FONCTIONNE PAS. IDEM AVEC String.fromCharCode(32) 
        construction_balise(txt);
    }
}
 
function construction_balise(texte)
{
    var balise_p=document.createElement("p");           // Création de la balise P
    var texte_balise=document.createTextNode(texte);    // Texte de la balise
    balise_p.appendChild(texte_balise);                 // Associe le texte à la balise
 
    var attr=document.createAttribute("id");            // Création d'un ID pour la balise P
    attr.nodeValue="mot" + j;                           // Nom de l'ID incrémenté
    j++;
 
    balise_p.setAttributeNode(attr);                    // Attribut  l'ID à la balise P
 
 
    var affiche_ecran=document.getElementById("bt");    // Récupère le div qui contient la balise P
    affiche_ecran.appendChild(balise_p);                // Affiche le texte de la balise P à l'écran
 
}
 
decoupage_texte();

HTML

Code :

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

1
2
 
<div class="boite" id="bt"></div>

CSS

Code :

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

1
2
 
p {float:left; color:black;font-size:16pt; background-color:green; top:100px;}

Merci pour votre aide.

[SpaceFrog]

n'oublie pas que c'est du html ...

Code :

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

 txt=texte_decoup[i] + " ";

[hellspawn_ludo]

Merci SpaceFrog pour ta réponse.

J'avais essayé mais ça me concatène la chaine ainsi visuellement, j'ai : L'homme,&nbspici,&nbspva&nbsplentement.&nbsp

Ca ne marche donc pas. Aurais-tu une autre idée ?

Merci.

[SpaceFrog]

Code :

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

p {float:left; color:black;font-size:16pt; background-color:green; top:100px; padding-right:8px;}

[hellspawn_ludo]

Bien vu, ça fonctionne nickel.

Cependant, j'aurais aimé savoir pourquoi le &nbsp ou même le String.fromCharCode(32) n'est pas prit en compte ?

En bref, la balise P supprime automatiquement le caractère d'espacement en fin de ligne. Pourquoi ? Tout en sachant que &nbsp aurait dû être interprété.

Juste pour info, si je rajoute une lettre par concaténation, comme ceci :

Code :

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

1
2
 
txt=texte_decoup[i] + " " + "A";

là, ça marche. L'espace est visible.

Je garde pour le moment ta réponse et t'en remercie.

[SpaceFrog]

Il s'agit d'un problème d'encodage de l'espace.
l'espace final n'est pas interprété lors d'un createTextNode...
Il doit falloir utiliser un encodage octal ou un truc du genre...


si tu remplaces le creatTextNode par un innerHMLT et pour le coups le htmlentity de l'espace :

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
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
<style type='text/css'>
p {float:left; color:black;font-size:16pt; background-color:green; top:100px;}	
</style>
<script type="text/javascript">
 
var j=1;
 
function decoupage_texte()
{
 
    var txt="";
    var regSeparateur=new RegExp("[ ]+", "g");      // Expression qui permet de découper une chaine de caractère dès que le caractère d'espacement est trouvé
    var texte="L'homme, ici, va lentement.";        // Le texte à découper
    var texte_decoup=texte.split(regSeparateur);    // Récupère tous les mots dans un tableau : texte_decoup
 
    for (var i=0; i<texte_decoup.length; i++)
    {
        txt=texte_decoup[i] + "&nbsp;";  // le + " " NE FONCTIONNE PAS. IDEM AVEC String.fromCharCode(32) 
        construction_balise(txt);
    }
}
 
function construction_balise(texte)
{
    var balise_p=document.createElement("p");           // Création de la balise P
    balise_p.innerHTML=texte;
    //var texte_balise=document.createTextNode(texte);    // Texte de la balise
   // balise_p.appendChild(texte_balise);                 // Associe le texte à la balise
 
    var attr=document.createAttribute("id");            // Création d'un ID pour la balise P
    attr.nodeValue="mot" + j;                           // Nom de l'ID incrémenté
    j++;
 
    balise_p.setAttributeNode(attr);                    // Attribut  l'ID à la balise P
 
 
    var affiche_ecran=document.getElementById("bt");    // Récupère le div qui contient la balise P
    affiche_ecran.appendChild(balise_p);                // Affiche le texte de la balise P à l'écran
 
}
 
 
</script>
</head>
 
<body onload='decoupage_texte();'>
 <div class="boite" id="bt"></div>
</body>
 
</html>

là ça fonctionne.

En fait une toute petite recherche sur goole m'a permis de trouver le bon encodage...:

Code :

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

   txt=texte_decoup[i] + " \u00a0";

et là le createTextNode Fonctionne

[hellspawn_ludo]

Merci à toi, tes 2 solutions fonctionnent impeccablement.

Je vais garder la méthode avec le innerHTML. Après tout, elle me fait gagner une ligne de code.

Pour ce qui est de l'encodage octal, j'avais cherché de ce côté mais mes recherches ont été vaines.

Encore merci.