Discussion :

[lautux]

Bonjour à tous,

Je suis confronté à un problème de Javascript.
Je souhaite récupérer tous les éléments HTML contenus dans une sélection faite avec la souris. J'arrive sans problème à récupérer le texte sélectionné, mais impossible de trouver un solution pour récupérer les objets du DOM (les balises HTML).

Connaissez-vous une solution ?

Merci

[benji_dv]

Bonjour,
Pour récupérer les éléments, tu peux passer par le fait d'obtenir la liste des enfant du noeud qui contient tes éléments.
Ex:

Code :

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

1
2
3
4
<DIV id="maDiv">
<INPUT type=checkbox value=001 ID="Checkbox1">
<INPUT type=checkbox value=002 ID="Checkbox2">
</DIV>

Pour récupérer les checkboxes (et éventuellement vérifier s'il ont étés sélectionnés) :
document.getElementByID("meDiv").children
puis pour chaque noeud enfant, je peux récupérer le innerText ou l'innerHTML
qui te donnerons le contenu des balises sans interprétation...

@+

[lautux]

Merci de ta réponse,

Je n'ai pas dû bien expliquer mon problème.

Imaginons un utilisateur qui sélectionne une partie d'une page web, par exemple "du texte avec un mot en gras".
Le but étant alors de récupérer tous le dom sélectionné par l'utilisateur, c'est-à-dire les nodes :
...-TEXT avec pour valeur : "du texte avec "
...- BOLD avec pour valeur :
......- TEXT avec pour valeur : "un mot"
...- TEXT avec pour valeur : " en gras"
Tous le DOM sélectionné en fait.

Ca ne semble pourtant pas très compliquer comme ça, je pense donc que ça doit bien être possible.

[benji_dv]

Bonjour,

Essai ca : (je nai aucun mérite je l'ai trouvé là : http://www.quirksmode.org/js/selected.html
et je n'ai que modifié la fin : alert...)

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
function getSel()
{
	var txt = '';
	var foundIn = '';
	if (window.getSelection)
	{
		txt = window.getSelection();
		foundIn = 'window.getSelection()';
	}
	else if (document.getSelection)
	{
		txt = document.getSelection();
		foundIn = 'document.getSelection()';
	}
	else if (document.selection)
	{
		txt = document.selection.createRange().text;
		foundIn = 'document.selection.createRange()';
	}
	else return;
	alert( 'Found in: ' + foundIn + '\n' + txt);
}

les trois moyens de récupérer le texte sélectionné dépendent du navigateur,
visite la page que j'ai placé ci dessus pour complément d'info

@+

[Eric Berger]Balises code ajoutées, merci d'y penser à l'avenir

[lautux]

Encore merci pour ton aide, mais...

Récupérer le TEXTE sélectionné, j'y arrive. Mais j'ai besoin de récupérer les NODES sélectionnés.
Au finial, je doit donc obtenir, non pas une simple chaine, mais un tableau d'éléments HTML, le petit bout de l'arbre DOM qui est sélectionné.

Je cherche... et suis preneur d'idées ;-)

[yacinechaouche]

Salut,
Petite piste : regarde comment fait l'éditeur que tu as utilisé (vbulletin) pour poster ton message sur ce forum. Sous firefox, en utilisant le plugin web developer, tu peux voir les fichiers javascript utilisés par une page. Voici ce que j'ai pu trouvé :

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
 
		/**
		* Get Selected Text
		*/
		this.get_selection = function()
		{
			var range = this.editdoc.selection.createRange();
			if (range.htmlText && range.text)
			{
				return range.htmlText;
			}
			else
			{
				var do_not_steal_this_code_html = '';
				for (var i = 0; i < range.length; i++)
				{
					do_not_steal_this_code_html += range.item(i).outerHTML;
				}
				return do_not_steal_this_code_html;
			}
		};

Sachant que this.editdoc est trés probablement un simple textarea.

Je pense que tu peux accéder aux noeuds sous mozilla avec

Code :

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

1
2
3
 
var node = range.startContainer;
var pos = range.startOffset;

Bon courage !

Y.Chaouche

[lautux]

Merci beaucoup yacinechaouche !

La piste que tu as trouvé semble la bonne... avec les navigateurs basés sur Gecko.
Pour les autres... effectivement il va falloir bricoler :-(

Haaa les joies du dév. Web côté client !

[sekaijin]

une autre piste
tu passe part un getTextElements() qui te retourne une colection de toutes les zone de texte.
tu parcours la liste jusqu'a retrouver le début de ton texte.
lorsque le début coresponds tu regarde si le contenu deton noeud texte est bien la chaine que tu as capturé. dans ton exemple le noeud doit avoir "du texte avec" si ce n'est pas le cas tu continue ton parcour en cherchant le début
si c'est bien lui alors le premier tag est le fils suivant du parent de ton noeud texte et tous mes autres en cascade
tu t'arête des que dans ton parcours tu à reconstitué ta chaine.

A+JYT

[nihaoma]

Bonjour,

je cherche à récupérer la taille en pixel du texte sélectionné dans un TextBox.

Sous IE, pas de soucis, grace à ces 2 lignes:
sel = document.selection.createRange();
taille = sel.offsetLeft;


Sous FF (1.5) je n'arrive meme pas à récupérer le texte sélectionné. Un post ici dit qu'il faut utiliser "window.getSelection();" pour récupérer le texte sélectionné, sauf que ca ne fonctionne plus dès lors que le texte en question est dans un InputText (il ne me renvois pas d'erreur, mais renvoi une chaine vide)

et bien sur, document.getElementById('MonTextBox').getSelection() ne fonctionne pas (erreur, "is not a function")

quelqu'un aurait une idée svp ??

merci

NiHaoMa

[yacinechaouche]

TextBox n'est pas un element DOM standard, InputText non plus.

Y.Chaouche

[nihaoma]

merci pour ta précision mais je ne vois pas en quoi cela pourait m'aider ....que ce soit du DOM ou pas, FF est capable d'afficher un TextBox, javascript est capable d'accéder à certaines propriétés de ce TextBox, et meme via DOM il est possible de créer des TextBox, donc, qu'il soit "standard" ou pas, il n'y à pas de raison pour que le moteur JS de FF ne me donne pas d'une facon ou une autre l'information dont j'ai besoin puisque lui meme l'utilise forcément (ne serait-ce que pour le copier/coller de texte par exemple)

[yacinechaouche]

Je te conseil d'installer Firebug sur ta machine http://getfirebug.com
Tu auras accés à beaucoup d'informations sur les éléments que tu séléctionne avec ta souris.

Sélectionne ton text et essaye de voir son type , soit avec firebug, soit avec inspect this ! Et rends nous la réponse.

Y.Chaouche

[nihaoma]

c'est une bonne idée à laquelle je n'avais pas penser.
je l'ai installer et ai vérifier toutes les propriété/méthodes dispo sur mon champ text, hélas outre les selectionStart et selectionEnd, rien ne semble indiquer quelque chose en rapport avec ce fichu curseur...

je suis pourtant certain d'avoir déja croiser des sites faisant ce que je veux faire (hélas je ne me souviens plus lesquels), à savoir, déplacer un DIV (ou tout autre objet d'ailleurs) en fonction de ce qui est saisi dans un champ texte !

et plus "idéologiquement", ca me fait mal de penser que IE est capable de faire quelque chose que FF ne sait pas faire !

[yacinechaouche]

Si tu désigne par "champs texte" un INPUT avec attribut type="texte",

Code :

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

1
2
3
4
 
<form name="F1">
<input type='text' name="T1"/>
</form>

alors là il faut plutôt chercher sa dimension avec ses propriétés de style.

Code :

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

width  = document.F1.T1.style.width

ou quelque chose comme ça.

Y.Chaouche

[nihaoma]

c'est bien un champ text dont je parle, mais ce ne sont pas ses dimenssion que je recherche....je veux connaitre l'espacement en pixel entre le bord gauche de ce champ texte et le curseur (curseur de frappe, pas la souris)

[yacinechaouche]

OK je comprends mieux. Je ne savais pas qu'on pouvait avoir cette information.

Y.Chaouche

[nihaoma]

bah justement, sous FF, pas moyen de récupérer cette info, tandis que sous IE, je l'ai en 2 lignes...