Modifier le CSS du texte sélectionné à l'aide de Javascript

Je suis en train de faire un script javascript bookmarklet qui va agir comme un surligneur, changer le fond du texte sélectionné sur une page web pour en jaune lorsque le bookmarklet est pressé.

J'utilise le code suivant pour obtenir le texte sélectionné, et il fonctionne très bien, retourner la chaîne correcte

function getSelText() {
var SelText = '';
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
return SelText;

}

Cependant, lorsque j'ai créé une fonction similaire pour modifier le CSS du texte sélectionné à l'aide de jQuery, ce n'est pas le travail:

function highlightSelText() {
var SelText;
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
$(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

}

Des idées?

Double Possible: stackoverflow.com/questions/2584301/..., stackoverflow.com/questions/2582831/... et stackoverflow.com/questions/1622629/...

OriginalL'auteur Chris Armstrong | 2010-07-11

  1. 19

    La façon la plus simple pour ce faire est d'utiliser execCommand(), qui a une commande pour changer la couleur de fond dans tous les navigateurs modernes.

    Les éléments suivants doivent faire ce que vous voulez sur n'importe quel choix, y compris celles s'étendant sur plusieurs éléments. Non-IE navigateurs, elle tourne sur designMode, applique une couleur de fond et passe ensuite designMode à nouveau.

    Mise à JOUR

    Fixe dans IE 9.

    function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    //Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        //IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        //IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

    OriginalL'auteur

  2. 6

    Ici est un bon exemple de la façon dont cela pourrait fonctionner. Comme Zack points que vous devez être au courant de cas où la sélection s'étend sur plusieurs éléments. Ce n'est pas destiné à être utilisé comme tel, juste quelque chose pour aider à faire circuler des idées. Testé dans Chrome.

    var selection = window.getSelection();
var text = selection.toString();
var parent = $(selection.focusNode.parentElement);
var oldHtml = parent.html();
var newHtml = oldHtml.replace(text, "<span class='highlight'>"+text+"</span>");
parent.html( newHtml );
    Ça a l'air bon merci. Dans cet exemple, ce serait le parent de l'élément généralement être? Que faire si l'élément parent renferme plusieurs instances de la chaîne?
    Dans mon cas, le parent de l'élément a été le contenant <p> tag. Vous faites un bon point sur les instances répétées de la chaîne, surtout si ils mettent en évidence une parole commune. Je ne suis pas sûr de savoir comment obtenir autour de ça pour l'instant mais je vais poster si je pense à quelque chose.

    OriginalL'auteur

  3. 2

    Dans Firefox, vous pouvez utiliser le ::-moz-selection pseudo-classe.

    Dans Webkit, vous pouvez utiliser le ::selection pseudo-classe.

    merci, mais je suis désireux de changer de façon permanente la CSS, afin qu'il reste bien mis en évidence, même quand je le désélectionner. Doit également travailler de la croix-navigateur

    OriginalL'auteur

  4. 2

    Regarder un petit exemple que j'ai fait à http://www.jsfiddle.net/hbwEE/3/

    Il ne prend pas en compte les sélections qui s'étendent sur plusieurs éléments..
    (IE vais faire, mais mess le html un peu ..)

    OriginalL'auteur

  5. 1

    Pour faire le bâton de mettre en évidence de façon permanente, je crois que vous allez avoir à envelopper la sélection dans un nouveau élément du DOM (span devrait faire), à laquelle vous pouvez attacher des propriétés de style. Je ne sais pas si jQuery peut le faire pour vous. Gardez à l'esprit que les sélections peuvent s'étendre les limites d'élément, donc dans le cas général, vous allez avoir à injecter un tas de nouveaux éléments

    OriginalL'auteur

  6. 0

    J'aime Tim réponse, c'est propre et rapide. Mais il arrête également les portes à toutes les interactions avec les faits saillants.

    L'insertion d'éléments en ligne directement sur les textes est un mauvais choix, comme ils ont cassé le flux de texte et le désordre des choses dans des situations complexes,

    Donc je suggère une sale hack que

    1. calcule la disposition absolue de chaque ligne de texte sélectionné (peu importe où ils sont),
    2. puis insert de couleur semi-transparente inline-block éléments à la fin du corps du document.

    Ce extension chrome est un exemple de comment cela peut être fait.

    Il utilise l'API de cette bibliothèque pour obtenir la disposition absolue de chaque ligne sélectionnée.

    OriginalL'auteur