Obtenir tous les éléments situés à l'intérieur d'une sélection ?

**Beginner.** · 07/03/2017, 22h14

Salut,

J'aimerais savoir si il est possible d'obtenir tous les éléments situés à l'intérieur d'une sélection....

Code html :

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

<p>salut <b>ceci est  [un</b> <i>exe</i>m<b>ple  </b>p<i>ou</i>r  e<i>xpl</i>i<i><b>qu</b></i>er  <i>ce</i> q<b>u</b>e<i> je]  voudrais</i> faire</p>

Le rendu visuel est : salut ceci est [un exemple pour expliquer ce que je] voudrais faire

Supposons que je sélectionne la partie entre crochets, est-il alors possible d'obtenir tous les éléments qui sont situés entre ces crochets et par exemple dont le tagName est "i" ?

Si on avait affaire à une node on pourrait faire ceci : uneNode.getElementsByTagName("i")... Mais comment obtenir la même chose pour une sélection ?

---> C'est peut-être impossible mais je voulais quand même poser la question...

PS : Je ne comprends pas pourquoi il n'y a pas de coloration syntaxique...

**danielhagnoul** · 08/03/2017, 01h00

Ce n'est pas impossible, mais c'est complexe. Je ne vois pas où cela se justifie.

Un exemple pour les tags "b" uniquement :

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
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';    
 
    document.addEventListener( 'DOMContentLoaded', ev => {
 
      for ( let item of Array.from( document.querySelectorAll( "p" ) ) ){
 
        item.addEventListener( "mouseup", ev => {
          let selection = window.getSelection();
          console.log( selection.toString() );
 
          for ( let [ i, node ] of Array.from( document.querySelectorAll( "b" ) ).entries() ){
            console.log( "tag b n° = ", i, selection.containsNode( node, true ) );
          }
 
        });
      }
 
    }, false );
 
    window.addEventListener( 'load', ev => {
 
 
    }, false );
  </script>
</head>
<body>
  <main>
 
    <p>
      salut <b>ceci est  [un</b> <i>exe</i>m<b>ple  </b>p<i>ou</i>r  e<i>xpl</i>i<i><b>qu</b></i>er  <i>ce</i> q<b>u</b>e<i> je]  voudrais</i> faire
    </p>
 
  </main>
</body>
</html>

**danielhagnoul** · 08/03/2017, 11h02

S'il s'agit de trouver et de remplacer un bout de texte ou de code sans perturber les tags, il faut utiliser https://github.com/padolsey/findAndReplaceDOMText.
Je l'avais déjà utilisé dans ma FAQ jQuery : http://danielhagnoul.developpez.com/...Surligner.html

**Beginner.** · 08/03/2017, 17h59

Salut,

Excellent ! Merci.

J'avais réfléchi avant et j'avais trouvée une idée dont le principe est proche de ce que tu as fait sauf que j'allais réinventer la roue apparemment car je ne connaissais pas ou du moins je ne l'avais plus en tête, la fonction : sel.containsNode(aNode,aPartlyContained) que tu as utilisée.

Et alors je me suis renseigné sur cette fonction et en cherchant je suis tombé sur d'autres fonctions intéressantes qui je pense vont me permettre de faire ce que je voulais...

--- > Entres autres distinguer les éléments qui sont entièrement dans la sélection de ceux qui le sont partiellement à droite et à gauche...

PS : Je pense que pour limiter les recherches et donc pour que l’exécution soit plus rapide on pourrait chercher les baises cibles à l’intérieure de la node qui est l’ancêtre commun le plus proche des deux extrémités de la sélection... Cette node ancêtre commun est simple à obtenir...

Envoyé par danielhagnoul

Ce n'est pas impossible, mais c'est complexe. Je ne vois pas où cela se justifie.

Un intérêt entre autres c'est de faire une fonction qui supprime un formatage spécifique comme le gras, l'italique ou autre style personnalisé... Bien sûr pour les style classique comme le bold ou l'italic ou l'underline... On peut le faire avec la fonction execCommand...

Envoyé par danielhagnoul

S'il s'agit de trouver et de remplacer un bout de texte ou de code sans perturber les tags, il faut utiliser https://github.com/padolsey/findAndReplaceDOMText.
Je l'avais déjà utilisé dans ma FAQ jQuery : http://danielhagnoul.developpez.com/...Surligner.html

Merci. Oui je connaissais ces deux liens, j'avais lu une de tes réponses dans un autre fil et je n'ai pas trouvé mieux que cette librairie.

Obtenir tous les éléments situés à l'intérieur d'une sélection ?

JavaScript

Discussions similaires

Partager

Partager