Identifier parents d'une selection

Version imprimable

18/03/2017, 08h50
patricktoulon

Identifier parents d'une selection
Bonjour a tous
comment obtenir la balise "P" parent d'une sélection

quand il n'y a pas de balise dans le P et que du texte le code qui suit donne"[object text]"
Code:

1 2 var sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer;
merci pour le retours

Salut,

Essaie ça.

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
 
<script>
function toto() {
   var range  = window.getSelection ();                                        
   var parent = range.anchorNode;
   while (parent != null) {
    if (parent.tagName == "P") {
   alert("Le contenu de la balise P = "+parent.innerHTML);
   return;
    } // if (parent.tagName != "P")
 
    var parent = parent.parentNode;
    if (parent.className == 'comment') {
      return;
    } // if (parent.className == 'comment')
 
   } // while (parent != null) 
}
</script>
    <div id="comment" class="comment" contenteditable onclick="operate();" onkeyup="operate();" onkeydown="operate();">
  <p><b><span>texte à sélectionner dans une balise p</span></b></p><br/>
  texte à sélectionner qui n'est pas dans une balise p
 </div>
    <br />
 <input type="button" id="t" value="Clic" onclick="toto()"/>

Bonjour Badaze

nikel donc pour moi se sera dans ma fonction

Code:

1
2
3
 var sel = window.getSelection();
    var parent = sel.getRangeAt(0).commonAncestorContainer;
if(parent=="[object Text]"){parent=parent.parentNode;}

merci ;)

18/03/2017, 14h30
NoSmoking

Bonjour,
je note que la St Patrick t'a été fatale :mouarf:

Discussion du 04/03/2017, la tienne : Identifier le parent d'une sélection de texte
18/03/2017, 14h52
patricktoulon

re

bonjour noSmoking
non pas du tout il s’avère que quand je n'ai que du texte sans balises parentElement ne marche pas et me donne "undefined"

jusque a present je testais avec le texte balises ou pas dans un font globale enfant du "p"

ca arrive aussi quand la sélection croise plusieurs balise selon le code innerhtml j'ai aussi "undefined"
18/03/2017, 15h38
NoSmoking

C'est pourtant le même « combat », il te faut créer une fonction générique qui remonte l'arbre du DOM et ne pas multiplier les fonctions au coup par coup.
18/03/2017, 15h44
patricktoulon

re

oui c'est vrai j'ai tendance a réécrire la même chose sur plusieurs fonctions au lieu d'en faire une générique
appelée au besoins dans chaque fonctions quand cela est utile

je procede comme ca pourtant en vba tres souvent avec des classes

mais je n'ai pas encore suffisamment confiance en moi en JS pour jouer au aller retour dans les fonctions j'ai encore beaucoup de mal a trouver les erreur de syntaxe quand j'en fait
18/03/2017, 17h39
Beginner.

Salut,

Est-ce que [object text]" fonctionne dans tous les navigateurs et est plus générale que le nodeType égale à 3 ?

Comme on parlais du nodeType ici : #3 je me demande si il y a une différence entre if(parent=="[object Text]") et if(parent.nodeType == 3) ?
19/03/2017, 11h54
NoSmoking
Préfère, et de loin, la notation
Code:

1 2 if (parent.nodeType === 3) { }
19/03/2017, 12h17
Beginner.

Merci. Oui c'est surtout cette notation que j'ai vu jusqu'à maintenant...

Dans un code j'ai vu ce genre de test aussi : if (uneNode.firstChild), je crois que c'est aussi une manière de savoir si "uneNode" est ou n'est pas une nodeText...
19/03/2017, 13h31
patricktoulon

re

j'ai adopté la notation
20/03/2017, 16h05
NoSmoking

Citation:

Dans un code j'ai vu ce genre de test aussi : if (uneNode.firstChild), je crois que c'est aussi une manière de savoir si "uneNode" est ou n'est pas une nodeText...

cela signifie simplement que l'on teste si le noeud uneNode à un premier enfant, donc qu'il n'est pas « vide », d'enfant s'entend, mais cet enfant peut lui être vide.

Ah oui je n'ai pensé au cas où uneNode serait un élément vide... Donc en fait si uneNode n'a pas d'enfant cela signifie soit que c'est un élément vide soit que c'est une nodeText (car une nodeText n'a pas d'enfant)...

En fait j'ai vu ça dans ces bouts de code (issu de l'exemple 4 de cette page : http://help.dottoro.com/ljcvtcaw.php) :

Code:

1
2
3
if (startContainer.firstChild) {
                            var startLeaf = startContainer.childNodes[startOffset];
                        }

Et surtout ces deux fonctions l'une permet d'obtenir le prochain "leaf" et l'autre le "leaf" précédent :

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
        function GetNextLeaf (node) {
            while (!node.nextSibling) {
                node = node.parentNode;
                if (!node) {
                    return node;
                }
            }
            var leaf = node.nextSibling;
            while (leaf.firstChild) {
                leaf = leaf.firstChild;
            }
            return leaf;
        }
 
        function GetPreviousLeaf (node) {
            while (!node.previousSibling) {
                node = node.parentNode;
                if (!node) {
                    return node;
                }
            }
            var leaf = node.previousSibling;
            while (leaf.lastChild) {
                leaf = leaf.lastChild;
            }
            return leaf;
        }

Et cette fonction aussi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 function ColorizeNode (node, color) {
            var childNode = node.firstChild;
            if (!childNode) {
                ColorizeLeaf (node, color);
                return;
            }
 
            while (childNode) {
                    // store the next sibling of the childNode, because colorizing modifies the DOM structure
                var nextSibling = childNode.nextSibling;
                ColorizeNode (childNode, color);
                childNode = nextSibling;
            }
        }

Il me semble bien qu'ils s'en servent pour savoir si la node est ou non une nodeText mais je ne sais pas si ils ont pensé au fait que cette node pourrait être un élément vide...

20/03/2017, 18h56
NoSmoking
Citation:

Donc en fait si uneNode n'a pas d'enfant cela signifie soit que c'est un élément vide soit que c'est une nodeText (car une nodeText n'a pas d'enfant)...

oui c'est cela !
Code:

1 2 3 4 5   
Citation:

Et surtout ces deux fonctions l'une permet d'obtenir le prochain "leaf" et l'autre le "leaf" précédent :

Cela permet de descendre/monter rapidement l'arbre DOM.

Citation:

Il me semble bien qu'ils s'en servent pour savoir si la node est ou non une nodeText mais je ne sais pas si ils ont pensé au fait que cette node pourrait être un élément vide..

il n'y a aucun intérêt à colorizer un noeud vide et il en tiennent compte.

Citation:

Envoyé par le code

// If the text content of an element contains white-spaces only, then does not need to colorize

Citation:

Envoyé par NoSmoking

il n'y a aucun intérêt à colorizer un noeud vide et il en tiennent compte.

Ah oui bien vu ! Tu as l’œil... Effectivement ils en tiennent compte...

Ben alors justement avec le teste sur le nodeType égale à trois on aurait pas besoin de la fonction IsTextVisible (text)...

Citation:

Envoyé par NoSmoking

Cela permet de descendre/monter rapidement l'arbre DOM.

Oui et cela dans le but d'obtenir le prochain "leaf" c'est-à-dire une nodeText mais en fait comme tu me l'as fait comprendre leur fonction renvoi soit une nodeText soit un élément vide...

Et apparemment ils le savaient c'est pourquoi ils ont fait la fonction IsTextVisible (text)...

EDIT : Ah non je viens de réaliser un truc, la fonction IsTextVisible (text) teste si le texte contient uniquement des "espaces blanc", elle ne vérifie pas si le texte est vide...
Code:

1 2 3 4 5 6 7 8 // If the text content of an element contains white-spaces only, then does not need to colorize function IsTextVisible (text) { for (var i = 0; i < text.length; i++) { if (text[i] != ' ' && text[i] != '\t' && text[i] != '\r' && text[i] != '\n') return true; } return false; }

Identifier <P> parents d'une selection