Aide à la sélection

**memberteam** · 13/02/2007, 22h28

Salut tout le monde,
je cherche à sélectionner un contenu d'une page web en utilisant javascript, j'ai bien cherché comment faire, mais j'ai rien trouvé...y a uniquement la fonction select() concernant les champs de saisie.
ehh, je m'explique on suppose le code suivant:

Code :

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

1
2
3
4
5
6
7
8
 
<html>
  <head></head>
  <body>
    <p>à sélectionner</p>
    <input type="button" onclick="selectionner()" value="sélectionner" />
  </body>
</html>

la question est comment faire pour sélectionner le contenu de la balise P?
est-ce possible? :/

**Auteur** · 13/02/2007, 23h19

bonsoir,

justement pourquoi ne pas utiliser la fonction select ?
Tu peux faire passer un textarea pour un paragraphe grâce à une feuille de style qui supprime les bordures et l'ascenseur :

Code html :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#idTxt{
 border: none;
 overflow: hidden;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function  selectionner()
{
  document.getElementById("idTxt").select();
}
 
//-->
</script>
 
</head>
 
<body>
 
    <textarea id="idTxt" readonly="readonly">à sélectionner</textarea><br />
    <input type="button" onclick="selectionner()" value="sélectionner" />
 
</body>
 
</html>

**ryan** · 14/02/2007, 00h07

Yop!

Et ceci?

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
 
<html>
  <head>
  <script language="javascript">
  function selectionner(theid)
  {
    var p = document.getElementById(theid);
    var textrg = document.body.createTextRange();
    textrg.findText(p.innerText);
    textrg.select();
  }	  
  </script>
  </head>
  <body>
    <p id="lep">à sélectionner</p>
    <input type="button" onclick="selectionner('lep')" value="sélectionner" />
  </body>
</html>

**memberteam** · 14/02/2007, 12h02

Envoyé par ryan

Yop!

Et ceci?

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
 
<html>
  <head>
  <script language="javascript">
  function selectionner(theid)
  {
    var p = document.getElementById(theid);
    var textrg = document.body.createTextRange();
    textrg.findText(p.innerText);
    textrg.select();
  }
  </script>
  </head>
  <body>
    <p id="lep">à sélectionner</p>
    <input type="button" onclick="selectionner('lep')" value="sélectionner" />
  </body>
</html>

merci ryan, c'est exactement ce que je recherche

**Auteur** · 14/02/2007, 13h19

le code de Ryan n'est pas compatible avec Firefox (à cause de createTextRange() et innerText).

E.Bzz >> au moment du clic, modife la couleur du fond et celui de la police, le texte sera ainsi "sélectionné"

**E.Bzz** · 14/02/2007, 13h51

Envoyé par Auteur

E.Bzz >> au moment du clic, modife la couleur du fond et celui de la police, le texte sera ainsi "sélectionné"

Oui c'est vrai, si c'est pour l'apparence ...
Mais je pensais qu'il y avait peut-être une histoire de copié/collé automatisé derrière tout ça

A+

**ryan** · 14/02/2007, 14h39

Yop!

Envoyé par Auteur

le code de Ryan n'est pas compatible avec Firefox (à cause de createTextRange() et innerText).

Voui, j'avais essayé autrement: une fonction récursive qui parcourait l'arbre en-dessous de l'objet choisi comme parent(ici un p), faisait le tri selon le type de noeud pour ne récupérer que les textes, mais je me suis ramassé un message d'erreur (out of memory) dont je ne suis pas parvenu à comprendre la cause exacte, donc j'ai laissé tomber le choli code cross-browser.

Là je suis en plein taf (si si), mais je vais ré-essayer ce soir si j'ai du temps.

**E.Bzz** · 14/02/2007, 08h56

Bonjour,

Envoyé par memberteam

la question est comment faire pour sélectionner le contenu de la balise P?

Il y a plus simple, non ?

Code :

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

1
2
<p id="la_zone">à sélectionner</p>
    <input type="button" onclick="alert(document.getElementById('la_zone').innerHTML);" value="sélectionner" />

A+

EDIT : plus simple mais pas de selection, donc hors sujet => on oublie

**E.Bzz** · 15/02/2007, 09h25

Alors, visiblement, plutôt que la recherche "dans la page", il vaut mieux que tu fasses un parcours de l'arborescence de tes objets (DOM), avec test sur le type (<p> ou pas), puis sur le data (= texte cherché ou pas).
Ensuite, comme suggéré par Auteur, tu change le style pour que, à l'affichage, cette fois, le texte soit "sélectionné".
Comme dans ton code tu seras "dessus", et qu'il sera sélectionné à l'écran, tu auras, fonctionnellemnt, exactement le même résultat et les même possibilités ...

A+

**memberteam** · 15/02/2007, 11h32

en effet, je me retrouve dans le noeud où je dois lancer la recherche.
mais document.body.createTextRange() sélectionne tout le contenu du body, or il se peut que le texte contenu dans le noeud figure dans un autre endroit donc quand je lance la fonction findText de TextRange relatif au document.body le texte dont j'en ai rien à faire sera inclu dans la sélection

vous trouverez ci-joint le script implémentant la fonction range...

**E.Bzz** · 15/02/2007, 12h04

Envoyé par memberteam

mais document.body.createTextRange() sélectionne tout le contenu du body, or il se peut que le texte contenu dans le noeud figure dans un autre endroit donc quand je lance la fonction findText de TextRange relatif au document.body le texte dont j'en ai rien à faire sera inclu dans la sélection

La solution que je te proposais visait justement à NE PLUS utiliser ces 2 fonctions ...

A+

**memberteam** · 15/02/2007, 12h16

oui mais pour string-range, elle sélectionne une partie du data, mais pas tout, donc si je joue sur le style d'un noeud ceci va influencer le résultat visuel
par exemple si j'appelle string-range(/p, "à sélec")
ceci doit sélectionner uniquement les occurences de cette sous chaine

Aide à la sélection

JavaScript

Vue hybride

Discussions similaires

Partager

Partager