Comment puis-je obtenir de l'élément dans lequel le texte mis en évidence?

Je suis en train d'apprendre comment écrire un bookmarklet où je peux mettre en surbrillance du texte, cliquez sur le bookmarklet et ont-il me dire ce que vous avez mis en surbrillance. Je peux en arriver là, mais ensuite, je voudrais savoir quel élément que le texte est en.

Par exemple:

<div id="some-id">to be highlighted</div>

Le bookmarklet code:

javascript:(function(){alert(window.getSelection();})()

Si je mettez en surbrillance le texte "mis en évidence", puis cliquez sur le bookmarklet, il alertera le texte. Mais comment puis-je obtenir de l'élément dans lequel le texte est, dans ce cas l'élément après que?

De sorte que le flux est: mettre du texte en surbrillance, cliquez sur signet, bookmarklet vous dit ce que vous avez mis en exergue et l'élément.

Merci!

De ne pas être obscène spammeur ou quoi que ce soit, mais j'ai récemment écrit un bookmarklet générateur qui jette jQuery sur la page et vous permet d'écrire votre bookmarklet dans un script externe. Je n'ai pas l'esprit si vous examiner l'exécution d'un code.

OriginalL'auteur Koes Bong | 2011-01-09

  1. 20

    Essayer quelque chose de semblable à cela pour obtenir de l'élément du dom qui contient le texte sélectionné.

    window.getSelection().anchorNode.parentNode

    Il fonctionne sur firefox et Chorme, vous devez le tester dans les autres navigateurs.

    Il un caprice, si vous sélectionnez du texte, qui comporte plus d'un élément, seul le premier est retourné. Mais peut-être que vous pouvez vivre avec cela.

    Juste pour la référence sur ce qui est le anchorNode propriété:
    http://help.dottoro.com/ljkstboe.php

    Sur internet explorer cet extrait devrait faire l'affaire (je ne peux pas le tester)

    document.selection.createRange().parentElement();

    comme indiqué dans
    http://msdn.microsoft.com/en-us/library/ms535872.aspx et
    http://msdn.microsoft.com/en-us/library/ms536654.aspx

    Une gamme explication sur quirksmode: http://www.quirksmode.org/dom/range_intro.html

    Excellente idée, cependant anchorNode n'est pas pris en charge sur IE :-/
    ie9 ne prend en charge (msdn.microsoft.com/en-us/library/ff974688%28VS.85%29.aspx), les autres navigateurs microsoft offre non standard (pouvez-vous le croire?) solution.
    Cette approche est généralement correcte. Voir ma réponse pour la même approche entièrement développé.
    Je n'avais aucune idée à propos de anchorNode +1 pour l'
    Sachez que anchorNode n'est pas nécessairement un nœud de texte (ce pourrait être un élément), donc à l'aide de son parentNode propriété n'est pas toujours d'aller travailler.

    OriginalL'auteur Eineki

  2. 7

    Vous pouvez le faire de manière relativement simple dans tous les principaux navigateurs. Le Code est ci-dessous, exemple vivant: http://jsfiddle.net/timdown/Q9VZT/

    function getSelectionTextAndContainerElement() {
    var text = "", containerElement = null;
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var node = sel.getRangeAt(0).commonAncestorContainer;
            containerElement = node.nodeType == 1 ? node : node.parentNode;
            text = sel.toString();
        }
    } else if (typeof document.selection != "undefined" &&
               document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        containerElement = textRange.parentElement();
        text = textRange.text;
    }
    return {
        text: text,
        containerElement: containerElement
    };
}
    +1 pour le beau morceau de code

    OriginalL'auteur Tim Down