Holen Sie sich den hervorgehobenen / ausgewählten Text

351

Ist es möglich, den hervorgehobenen Text in einem Absatz einer Website abzurufen, z. B. mithilfe von jQuery?

javascript jquery textselection Dan
quelle
2
Hier ist eine funktionierende Lösung dipaksblogonline.blogspot.in/2014/11/…
Dipak
Einfaches Javascript hat bei mir funktioniert. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)
Rohit Verma
@RohitVerma: Das funktioniert nur im einfachen Fall einer Auswahl, die in einem einzelnen Textknoten enthalten ist, was keineswegs garantiert ist.
Tim Down
@Dipak Wie replizieren Sie die Social-Sharing-Funktionalität aus dem Blog, auf das Sie in Ihrem Beitrag verweisen? Anstatt nur die ausgewählte Zeichenfolge zurückzugeben, versuche ich, diese Variable in einen Twitter-Link einzufügen.

Antworten:

481

Das Abrufen des vom Benutzer ausgewählten Textes ist relativ einfach. Durch die Einbindung von jQuery können Sie keinen Vorteil erzielen, da Sie nur die Objekte windowund benötigen document.

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Wenn Sie an einer Implementierung interessiert sind, die sich auch mit Auswahlen in <textarea>und Textelementen befasst <input>, können Sie Folgendes verwenden. Da es jetzt 2016 ist, lasse ich den Code weg, der für die IE <= 8-Unterstützung erforderlich ist, aber ich habe an vielen Stellen dafür Dinge auf SO gepostet.

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};
Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>
Erweitern Sie das Snippet

Tim Down
quelle
9
Wofür ist die {} -Gabel sonst noch gut? Worum geht es bei "Kontrolle"?
Dan
29
@ Dan: Entschuldigung, ich habe diese Frage verpasst (glaube nicht, dass SO mich darauf aufmerksam gemacht hat). Der zweite Zweig ist für IE <= 8 (IE 9 implementiert window.getSelection()). Bei der document.selection.typePrüfung wird geprüft, ob es sich bei der Auswahl eher um eine Textauswahl als um eine Steuerelementauswahl handelt. In IE ist eine Steuerelementauswahl eine Auswahl innerhalb eines bearbeitbaren Elements, das ein oder mehrere Elemente (z. B. Bilder und Formularsteuerelemente) mit Konturen und Ziehpunkten zur Größenänderung enthält. Wenn Sie eine .createRange()solche Auswahl aufrufen , erhalten Sie ControlRangeeher eine als eine TextRangeund ControlRangehaben keine textEigenschaft.
Tim Down
2
@TimDown Es ist sehr dünn, jemals zu sagen, dass "jQuery kein X hat", denn mit dem richtigen Plugin kann es natürlich alles tun, was Sie im Browser mit Javascript tun können. In diesem Fall haben wir jquery.selection ( madapaja.github.io/jquery.selection ). Es ist ebenso falsch zu sagen "noch sollte es". Ich bin hier angekommen, weil ich genau das gesucht habe. Ich habe einen Anwendungsfall und jQuery ist die richtige Lösung.
Auspex
8
@Auspex: Ich verstehe deinen Standpunkt irgendwie, aber ich bin anderer Meinung. Ein jQuery-Plugin ist eine Bibliothek, die von jQuery abhängig ist. es ist nicht selbst jQuery. Im Fall der Auswahlbehandlung bietet jQuery selbst genau nichts (was so sein sollte, weil die Auswahlbehandlung nicht das ist, wofür jQuery gedacht ist), sodass jede Lösung, die jQuery verwendet, diese im Übrigen verwendet.
Tim Down
1
@ Dennis98: Ich bin nicht aus der Ferne verärgert oder beleidigt :) Die Prüfung für die Eingabeart ist , weil Sie Warnungen in der Konsole in Chrome erhalten , wenn Sie versuchen, zuzugreifen selectionStartoder selectionEndin einem <input>Elementtyp (wie „Zahl“) , die nicht unterstütze es (siehe zum Beispiel jsfiddle.net/6zoposby/2 ). Ich habe den Scheck auf das Vorhandensein von verlassen, selectionStartdamit der Code im IE <= 8 nicht kaputt geht. Ich gebe zu, dass der Scheck für activeElementjetzt wahrscheinlich übertrieben ist. Ich benutze es, sliceweil es leistungsfähiger ist (obwohl das hier nicht nützlich ist) und etwas kürzer zu tippen ist als substring.
Tim Down
111

Erhalten Sie hervorgehobenen Text auf folgende Weise:

window.getSelection().toString()

und natürlich eine spezielle Behandlung für dh:

document.selection.createRange().htmlText
ParPar
quelle
2
Für IE> = 10 wurde " document.selection Unterstützung in IE10 entfernt und durch window.getSelection " ersetzt. Quelle: connect.microsoft.com/IE/feedback/details/795325/…
user2314737
Dies schlägt unter verschiedenen Bedingungen in verschiedenen Browsern (z. B. Firefox) fehl.
Makyen
11

Diese Lösung funktioniert, wenn Sie Chrome verwenden (andere Browser können nicht überprüft werden) und wenn sich der Text im selben DOM-Element befindet:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)
Andrew Kennedy
quelle
0

Verwenden Sie window.getSelection().toString().

Sie können mehr auf developer.mozilla.org lesen

Ebuka
quelle