Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?

**Beginner.** · 03/06/2015, 12h05

Salut,

Je crois que c'est difficile mais je pose quand même la question : Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?

Je m'explique, supposons que j'ai ce source code affiché par exemple dans un textarea ou un élément éditable :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>...</head>
<body>
    <div>...</div>
    <div>...</div>
    <div>
        <h1>Un titre h1...</h1>
        <p>Un paragraphe p0...</p>
        <p>Un deuxième|paragraphe p1...</p>
        <p>Un troisième paragraphe p2...</p>
    </div>
</body>
</html>

et que le curseur texte (en rouge) soit placé à l'intérieur du deuxième paragraphe eh bien j'aimerais obtenir le chemin de cet élément genre comme ceci :

html > body > div[2] > p[1]

Et si possible avoir l'offset (position à l'intérieur de l’élément en nombre de caractères).

C'est peut-être impossible ou du moins difficile mais je pose la question quand même pour voir...

Merci.

**Bovino** · 03/06/2015, 14h10

Il est facile de savoir sur quel élément tu es, à partir de là, utiliser des parentNode() jusqu'à ce qu'on atteigne le haut de l'arborescence est tout aussi simple.
En revanche, connaitre l'offset est plus délicat, il faut manier les objets Range en tenant compte des différences entre IE et les navigateurs.

**Beginner.** · 03/06/2015, 14h37

Merci.

Oui effectivement c'est plus facile si il s'agit d'une page html affichée dans un navigateur, dans ce cas on peut utiliser parentNodes() comme tu dis ou autres propriétés. Ceci dit en faisant cela on n'aura pas les indices, c'est-à-dire on n'aura par exemple ceci : html > body > div > p et non ceci : html > body > div[2] > p[1] or je crois que seul le chemin avec indices correspond à un seul élément alors que celui sans indices peut correspondre à plusieurs éléments.

De toute façon j'ai vu comment on pouvait faire ça lorsque la page html est affichée dans un navigateur mais moi je parlais dans le cas où on a affaire au code source affiché dans un éditeur (par exemple dans un textarea ou un élément éditable).

Dans ce cas c'est plus difficile car on a pas la possibilité d'utiliser parentNodes(), childNodes()...

En fait je crois que ça revient à parser sois-même le code...

**SylvainPV** · 04/06/2015, 10h12

facile avec mouseover/mousemove et e.clientX/Y / e.target : http://jsfiddle.net/t19Lstp7/

**Bovino** · 04/06/2015, 10h25

Sylvain, ta méthode ne permet pas de connaitre le rang de la balise survolée par rapport à son type et son parent.

Il faut remonter d'un cran et lister tous les éléments de même nature :
http://jsfiddle.net/t19Lstp7/1/

**SylvainPV** · 04/06/2015, 12h04

Ça c'était l'étape suivante, mais il faut bien laisser les gens bosser un peu

**Bovino** · 04/06/2015, 14h05

Il lui reste encore le TP final : trouver le chemin complet.

**Beginner.** · 04/06/2015, 18h46

Salut,

Merci pour vos réponses. Comme je disais si il s'agit d'une page html affichée dans un navigateur ou autre j'ai vu comment on pouvait faire ça et d'ailleurs pour ceux que cela intéresserait voici un exemple de mise en œuvre (qui affiche aussi les identifiants) : http://jsfiddle.net/zwng948j (c'est une adaptation, la fonction la plus importante n'est pas de moi).

Mais en fait je parlais dans le cas où on a affaire au code source affiché dans un éditeur (par exemple dans un textarea ou un élément éditable). Dans ce cas c'est plus difficile car on a pas la possibilité d'utiliser parentNodes(), childNodes()... En fait je crois que ça revient à parser sois-même le code...

Et pour l'offset, là aussi ce que je demande est plus difficile car je parlais de la position à l'intérieur de l’élément en nombre de caractères et non en pixel. Pour ça il faudra peut-être utiliser les objets Range comme le disait Bovino.

Je ne sais pas si je suis clair...

**SylvainPV** · 04/06/2015, 19h58

En fait tu veux coder ton propre éditeur c'est ça ? Si c'est le cas en effet ils ont leur propres mécanismes de parsing. Leur fonctionnement est bien trop complexe pour qu'on puisse te répondre en quelques lignes, le mieux c'est que tu t'inspires du code source de parseurs d'éditeurs existants ou d'outils de coloration syntaxique.

**Beginner.** · 04/06/2015, 20h19

J'aimerais bien faire un mini éditeur en effet... Là j'aimerais faire la correspondance entre le code source et la page html affichée, c'est-à-dire si je clique sur un balise du code source cela met en évidence (surbrillance ou autre) la partie correspondante dans la page html affichée. Un peu comme l'inspecteur de Firebug ou autre...

Ou comme Amaya :
Pièce jointe 177836

Je me suis dis si je peux avoir le chemin de la balise (à partir du code source) alors on pourra appliquer un style à cette balise pour la mettre en évidence.

**Beginner.** · 21/01/2018, 19h36

Salut,

Je viens de découvrir qu'il y a des parsers natif comme : https://developer.mozilla.org/en-US/.../API/DOMParser

J'ai testé mais le problème c'est que le code html ne doit pas contenir d'erreur sinon il bloque...

Et aussi il adapte le code dans certains cas comme les navigateurs, par exemple si il y a une <div> dans un <p> il l'a sort du <p>...

Mais l'adaptation n'est pas aussi poussé que dans les navigateurs...
Tant mieux peut-être car parfois l'adaptation est trés différente de ce qu'on voulait...

Comment trouver le chemin de l’élément (balises) dans lequel se trouve le curseur ?

JavaScript

Discussions similaires

Partager

Partager