Discussion :

[patricktoulon]

bonjour a tous
jusqu'a present je le faisait en string en decantant la chaine formant le code html mais j'aimerais bien le faire un peu plus proprement

voila une selection de texte dans un conteneditable dans une balise peut donner quelques bizarrerie on la deja vu

mon soucis mis a part la creation de balise vides que je gere parfaitement bien j'ai un soucis avec les espaces et/ou "nbsp;" qui sont des childNodes de type 3

je voudrais supprimer que celles la
alors dans une boucle que j'ai limiter a 10 tours je les enleves suf que quelques fois ces childNodes type 3 sont une partie de texte qu'il ne faut bien évidement pas supprimer
et c'est la que ce pose mon soucis comment identifier le texte de ces childNodes type 3
innerHTML donnant undefined ainsi que innerText
quelqu'un aurait une idée
merci du retour

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
function selection() {
                   return window.getSelection();
                            }
 
function getrange() {
                      var sel=selection(); 
                     return sel.getRangeAt(0);
                             }
 
function clearSpaceRange(){
           var sel = selection();
        var parent = sel.getRangeAt(0).commonAncestorContainer;
        var range=getrange();
        var selectionhtml=range.cloneContents(); 
        var oSpan = document.createElement("SPAN");
        var oSpan2 = document.createElement("SPAN");
        oSpan.appendChild(selectionhtml);
        if(oSpan.lastChild.innerHTML==""){ oSpan.removeChild(oSpan.lastChild);}//suppression de la balise vide créée par la fermeture de balise dans l'append en cas de selection croisant 2 balises 
 
         alert("|" + oSpan.innerHTML +"|");
 
         oSpan2.innerHTML=oSpan.innerHTML
         alert("voir type  " + oSpan2.childNodes[oSpan2.childNodes.length -1 ].nodeType);//regard sur le dernier child affiche 3 si nodetype 3
 
          for (var i = 0; i < 10; i++) {
             if(oSpan2.lastChild.nodeType===3){ 
                                                                     alert(oSpan2.lastChild.nodeText);oSpan2.removeChild(oSpan2.lastChild);
                                                                     }
                                               }
 
         alert("oSpan2  |" + oSpan2.innerHTML +"|");
 
        //fragment=range.createContextualFragment( oSpan.innerHTML );
 
 
}

[patricktoulon]

re
autant pour moi je suis une bourrique c'est "textContent"

[Beginner.]

Salut,

Dans ton code je vois que tu testes si le texte est vide mais ne devrais-tu pas tester si il contient seulement des espaces ?

En plus il y a plusieurs types d'espaces, non ?

[patricktoulon]

bonsoir beguiner
dans le code que j'ai posté je ne teste que les vides("")
ca c'est pour enlever la balise qui se créé autiomatiquement sur selection croisant 2 balises

les tests espaces viennent ensuite

et le textContents ne fait pas la difference je crois non ?les espaces sont les memes non?

[Watilin]

innerText a été introduit par Microsoft dans IE6 et les autres navigateurs ont mis un moment avant de l’adopter ; il n’a été standardisé que très récemment. textContent c’est un peu l’inverse : il est spécifié dans le DOM niveau 3, il est supporté depuis longtemps par tout le monde sauf IE, et pour ce dernier il a fallu attendre la version 9.

En dehors de cet aspect historique, il y a une différence importante entre les deux : textContent inclut le code source des <style> et <script> in-line (c’est-à-dire qui ne sont pas dans un fichier externe), alors que innerText les ignore.

Code html :

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

1
2
3
<script>
alert("bonsoir");
</script>

Code :

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

1
2
3
4
5
document.querySelector("script").textContent
// alert("bonsoir")
 
document.querySelector("script").innerText
// ""

À mon avis, innerText remplit mieux son rôle que son concurrent standard, puisqu’on parle de restituer une représentation textuelle du contenu de l’élément concerné. Ah oui parce que je ne l’ai pas dit, innerText est assez intelligent pour ignorer les éléments qui sont masqués par une règle display: none.
Bref, pour une fois, c’est Microsoft qui a fait les choses correctement (article en anglais).


Oh, en ce qui concerne les nœuds de type 3 : tu peux utiliser l’attribut nodeValue, un truc générique présent sur tous les types de nœud ; ou alors data qui est spécifique aux nœuds de texte.

Également, il peut être utile de savoir que le code d’échappement de l’espace insécable &nbsp;, dans les chaînes JavaScript, est "\xA0" (l’équivalent unicode est "\u00A0").

[Beginner.]

Ah c'est intéressant tout ça. Merci.

Ainsi je déduit que innerText est mieux si on veut faire une recherche d'un mot dans un document ! Car normalement on cherche dans le texte visible...


PS : Il y a aussi data ou nodeValue...