wie man ausgewählten Text erhält, aber kann ich umgebenden Kontext in Javascript erhalten?

Question

Ich bin in der Lage, den Text zu greifen, dass ein Benutzer auf einer Webseite ausgewählt hat, mit diesem Code:

function getSelected() { 
    var userSelection; 
    if (window.getSelection) { 
     selection = window.getSelection(); 
    } else if (document.selection) { 
     selection = document.selection.createRange(); 
    } 

} 

es für mich, die Worte zu bekommen posible ist um das ausgewählte Wort.

Nehmen Sie diese Sätze zum Beispiel: „Wenn Sie framglubble der zartbox benötigen, dann sollten Sie die rot-Widget kaufen Andernfalls können Sie den blauen Widget kaufen und etwas Geld sparen..“

Mein Code wird mir sagen, ob die Person das Wort "Widget" ausgewählt hat. Aber ich würde gerne wissen, ob die Auswahl nach "rot" oder "blau" ist. Ist das möglich? Ich habe im Internet nach einem Ratschlag gesucht, und Ich habe Probleme, eine Antwort zu finden.

danken Ihnen für Ihre Hilfe

Answer 1

ich schnell Skript geschrieben haben, die den Teil vor der Auswahl zu identifizieren und nach der Auswahl innerhalb des gleichen DIV-Element.

Wenn jedoch das gleiche DIV das gleiche Wort mehr als einmal enthält und Sie nur dieses Wort auswählen, kann der aktuelle Code, den ich geschrieben habe, nicht identifizieren, ob es das erste oder zweite ausgewählte Wort ist .

Wie auch immer, Sie können den Code hier sehen/kopieren/testen: http://jsfiddle.net/kvHxJ/ wählen Sie einfach etwas und sehen Sie die Warnung, die erscheint.

Wenn es für Ihre Bedürfnisse nach allem dann groß ist, dann akzeptieren Sie diese Antwort und gehen Sie weiter ... sonst muss ich wissen: können wir annehmen, dass der Benutzer ganze Wörter nur ein Wort auswählen wird? Wenn die Antwort ja ist, habe ich eine Idee, wie ich das umgehen kann.

Answer 2

Die Möglichkeit, dies in Nicht-IE-Browsern zu tun, besteht darin, ein Range Objekt aus der selection zu erhalten. Der Bereich hat eine Start- und Endgrenze, und jede Grenze des Bereichs wird als ein Offset innerhalb eines Knotens ausgedrückt; Wenn die Grenze innerhalb eines Textknotens liegt, ist dieser Offset ein Zeichenoffset.

Zum Beispiel, wenn die folgenden war ein Textknoten und die Auswahl durch Rohre begrenzt ist:

"red |widget| blue widget" 

... dann wird der Bereich, den Sie von der Auswahl eines Start würde innerhalb von 4 versetzt bekommen der Textknoten.

Im Folgenden finden Sie eine Auswahl, die die Auswahl erhalten und die Startgrenze aufmerksam gemacht:

var sel = window.getSelection(); 
var selectedRange = sel.rangeCount ? sel.getRangeAt(0) : null; 
if (range) { 
    alert("Offset " + selectedRange.startOffset 
     + " in node " + selectedRange.startContainer.nodeName); 
} 

Bereiche können zu anderen Bereichen verglichen werden, so dass, wenn Sie zum Beispiel wissen will, ob die aktuelle Auswahl kam nach dem Wort „blau“ im obigen Textknoten, können Sie einen Bereich umfasst das Wort „blau“ und vergleichen Sie es mit dem ausgewählten Bereich erstellen:

// Assume the text node is stored in a variable called textNode 
var blueRange = document.createRange(); 
blueRange.setStart(textNode, 11); 
blueRange.setEnd(textNode, 15); 

var selectionIsAfterBlue = 
    (selectedRange.compareBoundaryPoints(Range.END_TO_START, blueRange) == 1); 

in IE, nichts davon funktioniert und alles ist anders gemacht im Allgemeinen mit viel mehr Schwierigkeit. Um dies zu einer einzigen konsistenten Schnittstelle zu normalisieren, könnten Sie meine Rangy Bibliothek verwenden.

Answer 3

IE hat die move Reihe von Methoden, die dieses Problem auf nur ein paar Zeilen reduziert, um die Auswahl vorwärts oder rückwärts beliebig viele Wörter zu erweitern (siehe http://www.webreference.com/js/column12/trmethods.html). Von da an geht es nur darum, den Text mit einer willkürlichen Liste von Werten zu vergleichen. Andere Browser haben diese Funktion AFAIK nicht. Schicksal des Browsers Kriege: man entwickelt ein tolles Feature ignoriert oder durch Patente von jedem anderen gesperrt, so dass das Feature für immer verloren und vermieden wird, da die Last der Cross-Browser-Unterstützung für alle diese Innovationen unweigerlich direkt auf die Website-Designer fällt.

Also, unten ist eine verallgemeinerte Funktion, nur die ID des Elternelements des ausgewählten Textes zu erhalten. Um mit dieser browserübergreifenden Lösung arbeiten zu können, müssen Sie jedes Wort in ein eigenes Element mit einer eindeutigen ID oder einem anderen Attribut einfügen. Mit diesem Setup sollte es dann ein relativ schmerzloser Sprung sein, um nach vorn und zurück zu Geschwistern oder sequentiell ID'd/benannten Elementen zu schauen.

Der Haken hier ist, dass der Client vom Anfang des Wortes oder Satzes bis zum Ende klicken und ziehen muss, und absolut keine angrenzenden Leerzeichen. Ein Doppelklick auf ein Wort bewirkt, dass es auf das nächste Element verweist (oder im Falle von IE der Eltern-DIV). Darüber hinaus sollten Sie Code hinzufügen, um die Auswahlgrenze auf einen einzelnen übergeordneten DIV zu beschränken, da der folgende Code die Auswahl auch auf umgebende Elemente erweitern kann. Aber hoffentlich können Sie das von hier aus beheben. Andernfalls müssen Vektoren verwendet werden, um die Koordinaten eines Textes im Vergleich zum umgebenden Text genau zu bestimmen.

 

<script type="text/javascript"> 

function get_selected_element_id() { 
if (window.getSelection) { 
    // FF 
    var range = window.getSelection(); 
    } 
else if (document.selection) { 
    // IE 
    var range = document.selection.createRange(); 
    } 
if (range.focusNode) { 
    // FF 
    var test_value = range.focusNode.parentNode.id; 
    } 
else { 
    // IE 
    var test_value = range.parentElement().id; 
    } 
return test_value; 
} 


</script> 

</head> 

<body> 

<div id="test_div"> 
<span id="test1">test</span> <span id="test2">asdf</span> <span id="test3">test2</span> <span id="test4">bla</span> 
</div> 

<button onclick="alert(get_selected_element_id());">go</button>