Discussion :

[Marvelll]

Bonjour,

Je ne connais pas très bien le javascript. J'ai fait quelques petits mais très petits programmes.

Là je voudrais récupérer un text en html à partir d'une sélection à la souris. J'ai effectué ce programme correctement. Seulement, j'ai un petit problème, car je voudrais aussi récupérer comme paramètre le nom de l'ID englobant le texte contenu. Exemple :

Code :

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

1
2
3
<div class="content" id="content_standard">
<p class="P1">Les données techniques et de management issues des différentes activités de développement et de déploiement du logiciel, sont enregistrées et gérées manuellement ou avec un outil de gestion de configuration.</p></div>
</div>

Je sélectionne : "données techniques", mon javascript renvoie à java le texte sélectionné mais je voudrais en plus qu'il me renvoie l'ID "content_standard". Sachant que l'id et le texte est susceptible de changer mais pas la forme de la div.

Bonus : Est-il possible qu'à partir du texte sélectionné, je puisse récupérer la phrase entière? Avec le même exemple, je voudrais récupérer "Les données techniques et de management issues des différentes activités de développement et de déploiement du logiciel, sont enregistrées et gérées manuellement ou avec un outil de gestion de configuration."

[Bovino]

Regarde du coté de startContainer, mais c'est de toute façon impossible avec IE.

[E.Bzz]

Bonjour,
pour l'id, visiblement, tous les "parents" du texte sélectionné n'en ont pas forcément (ici uniquement class="P1"). Il faut donc tester la présence de l'id jusqu'à en trouver un

Code :

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

1
2
3
4
5
function recupIdparent(obj) {
if (obj.id)
  return obj.id;
else return recupIdparent(obj.parentNode);
}

Pour le texte complet c'est plus simple

Code :

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

1
2
3
function recupTextcomplet(obj) {
return obj.innerHTML;
}

A tester avec

Code html :

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

<p class="P1" onselect="alert(recupIdparent(this));alert(recupTextcomplet(this));">

EDIT : Arf ! Pas sûr que ça fonctionne en dehors des textarea et input text

A+

[Bovino]

E.Bzz, tu ne peux pas passer d'une sélection de texte à l'arbre DOM sous IE et avec FF et autres, il faut au préalable passer par un objet Range

[Marvelll]

Bravo pour la rapidité, .

Je vais tester tout ça.

Je n'ai rien compris au message de Bovino, ça veut dire quoi?

[E.Bzz]

E.Bzz, tu ne peux pas passer d'une sélection de texte à l'arbre DOM sous IE et avec FF et autres, il faut au préalable passer par un objet Range

Effectivement j'ai un peu "abrégé" (manque de pratique sur ce point)
Et visiblement le onselect risque de pas fonctionner non plus

Bref ...

Regarde du coté de startContainer, mais c'est de toute façon impossible avec IE.

A+

[Marvelll]

Je tiens à préciser que je fonctionne sous le SWT Browser de Java (je crois qu'il prend le moteur de IE mais je ne suis pas sûr) donc c'est mort????

EDIT : Je viens de trouver un code qui marche en Delphi, il ne reste plus qu'à l'adapter en javascript.

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
  result := False;
  document := wb.Document As IHTMLDocument2;
  If Not Assigned(document) Then Exit;
  selectionObj := document.selection;
  If Not Assigned(selectionObj) Then Exit;
  selectionRange := selectionObj.CreateRange As IHtmlTxtRange;
  Selection := selectionRange.text;
  Element := selectionRange.parentElement;
  If Not assigned(Element) Then Exit;
  Balise := Element.tagName;
  Text := Element.innerHTML;
  Element := getParentIfClassFound(Element, 'content');
  If Not assigned(Element) Then Exit;
  str := LowerCase(copy(Element.id, 9, 1000));
  kind := IdToDocKind(str);
  result := true;

EDIT2 : Cela ne fonctionne pas, il me dit que selectionRange.text est vide.

[Marvelll]

Je voudrais obtenir le parent de mon élément sélectionné :

Code :

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

1
2
3
selectionObj = document.selection.createRange();
 
Selection = selectionObj.parentElement;

J'obtiens cette erreur:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#
# An unexpected error has been detected by Java Runtime Environment:
#
#  EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x7dd3442e, pid=2464, tid=3588
#
# Java VM: Java HotSpot(TM) Client VM (1.6.0_02-b06 mixed mode)
# Problematic frame:
# C  [mshtml.dll+0x14442e]
#
# An error report file with more information is saved as hs_err_pid2464.log
#
# If you would like to submit a bug report, please visit:
#   http://java.sun.com/webapps/bugreport/crash.jsp
#

[Bovino]

C'est normal.
createRange() récupère une portion de texte affichée, pas un élément du DOM, tu ne peux donc pas lui appliquer les méthodes du DOM.
De plus, createRange() est spécifique IE (et Opera), donc pas de lien possible avec le DOM.
Essaye :

Code :

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

1
2
var selectionObj = window.getSelection ();
var noeudSelected = selectionObj.startContainer;

[Marvelll]

Trouvé un début de solution grâce au lien suivant : http://groups.google.com/group/comp....76484c36bde1be

[Marvelll]

Est-il possible de récupérer le contenu d'une balise à partir d'une balise?

[E.Bzz]

Est-il possible de récupérer le contenu d'une balise à partir d'une balise?

Code :

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

this.innerHTML

A+

[Marvelll]

Bien évidemment, merci .

Sinon j'ai réussi à faire fonctionner, je poste ma solution ou non?

[E.Bzz]

Sinon j'ai réussi à faire fonctionner, je poste ma solution ou non?

Bien sûr : ça servira aux suivants



A+

[Marvelll]

Il faut utiliser le code suivant. Vous obtiendrez nodes qui vous permet d'avoir accès aux différents noeuds et vous faites ce que vous voulez avec (.id, .nodeName,...).

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
function getElementsFromSelection(){
    var nodes = null, candidates = [], children, el, parent, rng;
 
    rng = getSelectionRange();
    selectedText = rng.text;
    if (rng) {
        parent = getCommonAncestor(rng);
        if (parent) {
            // adjust from text node to element, if needed
            while (parent.nodeType != 1) 
                parent = parent.parentNode;
 
            // obtain all candidates from parent (excluded)
            // up to BODY (included)
            if (parent.nodeName.toLowerCase() != "body") {
                el = parent;
                do {
                    el = el.parentNode;
                    candidates[candidates.length] = el;
                }
                while (el.nodeName.toLowerCase() != "body");
            }
 
            // obtain all candidates down to all children
            children = parent.all || parent.getElementsByTagName("*");
            for (var j = 0; j < children.length; j++) 
                candidates[candidates.length] = children[j];
 
            // proceed - keep element when range touches it
            nodes = [parent];
            for (var ii = 0, r2; ii < candidates.length; ii++) {
                r2 = createRangeFromElement(candidates[ii]);
                if (r2 && rangeContact(rng, r2)) 
                    nodes[nodes.length] = candidates[ii];
            }
        }
    }
    return nodes;
 
    // Helpers
    function getSelectionRange(){
        var rng = null;
        if (window.getSelection) {
            rng = window.getSelection();
            if (rng && rng.rangeCount && rng.getRangeAt) {
                rng = rng.getRangeAt(0);
            }
        }
        else 
            if (document.selection && document.selection.type == "Text") {
                rng = document.selection.createRange();
            }
        return rng;
    }
 
    function getCommonAncestor(rng){
        return rng.parentElement ? rng.parentElement() : rng.commonAncestorContainer;
    }
 
    function rangeContact(r1, r2){
        var p = null;
        if (r1.compareEndPoints) {
            p = {
                method: "compareEndPoints",
                StartToStart: "StartToStart",
                StartToEnd: "StartToEnd",
                EndToEnd: "EndToEnd",
                EndToStart: "EndToStart"
            }
        }
        else 
            if (r1.compareBoundaryPoints) {
                p = {
                    method: "compareBoundaryPoints",
                    StartToStart: 0,
                    StartToEnd: 1,
                    EndToEnd: 2,
                    EndToStart: 3
                }
            }
        return p &&
        !(r2[p.method](p.StartToStart, r1) == 1 &&
        r2[p.method](p.EndToEnd, r1) == 1 &&
        r2[p.method](p.StartToEnd, r1) == 1 &&
        r2[p.method](p.EndToStart, r1) == 1 ||
        r2[p.method](p.StartToStart, r1) == -1 &&
        r2[p.method](p.EndToEnd, r1) == -1 &&
        r2[p.method](p.StartToEnd, r1) == -1 &&
        r2[p.method](p.EndToStart, r1) == -1);
    }
 
    function createRangeFromElement(el){
        var rng = null;
        if (document.body.createTextRange) {
            rng = document.body.createTextRange();
            rng.moveToElementText(el);
        }
        else 
            if (document.createRange) {
                rng = document.createRange();
                rng.selectNodeContents(el);
            }
        return rng;
    }
};