Récupérer l'ID de l'élément dans lequel un texte a été sélectionné

Bonjour, j'ai un petit souci - disons que j'ai 3 boites DIV avec chacune un ID (div1,div2,div3). Chaque DIV contient du texte.
Je souhaite identifier de quelle DIV (par son ID) une sélection du texte a été faite (tout ou partie du texte).

Code:

---

1 2 3

<div id=div1>ABCDEFGHIJK</div <div id=div2>747383947373</div <div id=div3>ksdjfbsqlsnfbflsn</div

---

j'ai un code, pour commencer, qui est celui-ci:

Code:

---

1 2 3 4

document.onmouseup = document.onkeyup = function() { selection = getSelectionText(); }

---

Je me suis dit "le focus n'est pas forcément sur le DIV lorsque la sélection est faite", mais ce code ne fonctionne pas dans la meme fonction:

Code:

---

1 2 3

$(this).focus(); var currentId = $(this).attr('id');

---

Du coup, je ne sais pas trop comment récupérer l'ID de ma boite DIV

Code:

---

1 2 3 4 5

document.onmouseup = document.onkeyup = function () { let ElemSelected = document.getSelection();   console.log(ElemSelected.focusNode.parentElement.id); }

---

Faut utiliser le DEBUGGER de ton navigateur, ce type d'information y est directement présente.

Merci beaucoup ! du coup je me permets d'avancer sur ma question.

Je récupère un "chemin d'accès" de mon élément de ce type:

Code:

---

span#monId.maClasse

---

Or, ma classe notamment contient des espaces, comme ci-dessous

Code:

---

span#texte1.content content-block

---

Du coup, quand j'essaye de "retrouver" mon texte dans la page, en faisant:

Code:

---

1 2 3

var monchemin = monTag+monId+maClasse console.log($(monchemin).text());

---

le contenu n'est retrouvé que pour les classes n'ayant pas d'espaces - comment gérer ce point ?

tu mélanges JavaScript et Jquery

Si tu as une nouvelle question cela implique un nouveau sujet

et je vais pas me lancer dans un chat de cours sur le JavaScript / jQuery :rouleau:

J’avais codé ce petit truc avant de voir la réponse de psychadelic :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function getSelectionContainerWithId() { let sel = window.getSelection(); if (0 === sel.rangeCount) return null;   let container = sel.getRangeAt(0).commonAncestorContainer; if (Node.TEXT_NODE === container.nodeType) { container = container.parentElement; }   while (container) { if (container.id) return container; container = container.parentElement; }   return null; }

---

Et parce que ça ne coûte pas grand chose, voici un lien vers la doc.

Salut,

Des réponses ont été données mais je voulais faire une remarque : le texte sélectionné pourrait très bien être à cheval sur plusieurs div alors dans ce cas il faut savoir ce que tu veux, le parent commun des deux extrémités de la sélection ? Le parent de la première extrémité de la sélection ? Le parent de la seconde extrémité de la sélection ?

Mais d’après l'autre fil de discussion je crois que tu veux en fait juste identifier l’élément survolé par le curseur souris, non ? Dans ce cas utiliser event.target est plus simple, non ???

Citation:

---

Envoyé par mathieuq1

Or, ma classe notamment contient des espaces, comme ci-dessous

Code:

---

span#texte1.content content-block

---

---

Si il y a des espaces c'est qu'en fait il y a plusieurs classes et je pense que pour le sélecteur il faut utiliser le point devant chaque classe... Il faudrait t'arranger pour obtenir ça : span#texte1.content.content-block ce qui n'est pas très difficile, dans l'autre fil on avait cité className et c'est faisable avec mais tu peux aussi utiliser directement classList...