Comment insérer un espace à la fin d'un mot en javascript ?

Version imprimable

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:

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:

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

CSS

Code:

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

Merci pour votre aide.

24/02/2008, 19h02
SpaceFrog

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

Code:

txt=texte_decoup[i] + " ";
24/02/2008, 19h11
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.
24/02/2008, 20h43
SpaceFrog

Code:

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

:mouarf::mouarf:
24/02/2008, 23h13
hellspawn_ludo
Bien vu, ça fonctionne nickel. :D

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é. :roll:

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

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.;)

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:

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:

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

et là le createTextNode Fonctionne

25/02/2008, 12h11
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.

;)