Wie kann ich den text markieren, der DOM Range-Objekt?

Ich wählen Sie etwas text auf der html-Seite(geöffnet im firefox) mit der Maus,und Verwendung von javascript-Funktionen, die ich schaffen/Holen Sie sich die rangeobject entsprechend dem ausgewählten text.

 userSelection =window.getSelection(); 
 var rangeObject = getRangeObject(userSelection);

Ich will jetzt markieren Sie alle den text, der kommt unter die rangeobject.Ich mache es so,

  var span = document.createElement("span");
  rangeObject.surroundContents(span);
  span.style.backgroundColor = "yellow";

Gut,dies funktioniert sehr gut, nur wenn die rangeobject(Startpunkt und Endpunkt) liegt in der gleichen textnode,dann unterstreicht Sie den entsprechenden text.Ex

    <p>In this case,the text selected will be highlighted properly,
       because the selected text lies under a single textnode</p>

Aber wenn die rangeobject umfasst mehr als eine textnode, dann ist es nicht die Arbeit properlay, Es unterstreicht nur die Texte, die liegen in der ersten textnode,Ex

 <p><h3>In this case</h3>only the text inside the header(h3) 
  will be highlighted, not any text outside the header</p>

Irgendeine Idee, wie kann ich es machen, alle Texte, die unter rangeobject,hervorgehoben,unabhängig davon, ob Palette, liegt in einem einzigen Knoten oder mehrere Knoten?
Danke....

InformationsquelleAutor der Frage ganapati | 2010-04-06

  1. 25

    Ich würde vorschlagen, mit document's oder die TextRange's execCommand - Methode, die ist gebaut für diesen Zweck, aber ist in der Regel in Bearbeitbare Dokumente. Hier ist die Antwort, die ich gab eine ähnliche Frage:

    Sollte Folgendes tun, was Sie wollen. In nicht-IE-Browser schaltet es designMode, gilt die Hintergrundfarbe wechselt dann designMode wieder ab.

    UPDATE

    Fest auf der Arbeit im IE 9.

    UPDATE 12 September 2013

    Hier ist ein link detailliert eine Methode für das entfernen von highlights, die dieses Methode:

    https://stackoverflow.com/a/8106283/96100

    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;
    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);
    }
}

    InformationsquelleAutor der Antwort Tim Down

  2. 4

    Feingliedrig ist ein cross-browser-Palette und Auswahl der Bibliothek, die dieses problem löst sich perfekt mit seiner CSS-Klasse-Applikator-Modul. Ich verwende es zu implementieren Hervorhebung in einer Reihe von desktop-Browser und auf dem iPad und es funktioniert perfekt.

    Tim Runter, die Antwort ist toll, aber Feingliedrige erspart Ihnen schreiben zu müssen und halten alle, die feature detection code selbst.

    InformationsquelleAutor der Antwort Mark Whitaker

  3. 1

    Könntest du bitte erläutern Sie die Notwendigkeit dieser Funktionalität. Wenn Sie nur ändern möchten, markieren Sie den Stil des ausgewählten Texts Sie können CSS verwenden,: ':: - Auswahl'

    Mehr Info:
    http://www.quirksmode.org/css/selection.html
    https://developer.mozilla.org/en/CSS/::selection

    InformationsquelleAutor der Antwort sv_in

  4. 0

    Können Sie versuchen, das hinzufügen einer Klasse für die umliegenden span und anwenden hierarchische CSS?

    var span = document.createElement("span");
span.className="selection";
rangeObject.surroundContents(span);

    In der CSS-definition,

    span.selection, span.selection * {
   background-color : yellow;  
}

    Habe ich nicht probiert. Aber nur raten, dass es funktionieren würde.

    InformationsquelleAutor der Antwort Mandai

Schreibe einen Kommentar