Ausgewählten Text in einem Browser abrufen, plattformübergreifend

Question

Eines der Dinge, die ich in meiner browserbasierten Anwendung tun möchte, ist, dem Benutzer die Möglichkeit zu geben, Text auszuwählen (nicht in einem <textarea>, sondern einfach nur alten Text!), und dafür zu sorgen, dass meine Anwendung eine kleine Symbolleiste einblendet kann dann mit dem nächsten interagieren (in meinem Fall Anmerkungen hinzufügen).

Ich habe bei Google eine Menge Dinge gefunden, die sich offenbar auf das Schreiben von WYSIWYG-Editoren konzentrieren. aber das ist nicht das, was ich will, und das meiste davon funktionierte im IE, aber nicht in FF2 oder 3.Idealerweise hätte ich gerne eine Funktion, die den aktuell ausgewählten Text im Browserfenster zurückgeben kann, das funktioniert IE7 (und 6, wenn möglich), Firefox 2 & 3 und Safari 2.Wenn es in Opera funktioniert, wäre das ein Bonus, aber keine Voraussetzung.

Hat jemand eine Funktion, die das macht?Oder eine Idee, wo man anfangen soll?

Answer 1

Schauen Sie mal vorbei jQuery und das WrapSelection-Plugin.Vielleicht ist es das, wonach Sie suchen.

Answer 2

Dieses jQuery-Plugin ist cool, erfüllt aber eine ganz bestimmte Aufgabe:Umschließen Sie den hervorgehobenen Text mit einem Tag.Das könnte genau das sein, was Sie wollen.Wenn Sie jedoch kein überflüssiges Markup zu Ihrer Seite hinzufügen möchten (oder sich in einer Situation befinden, in der Sie dies nicht können), können Sie stattdessen die folgende Lösung ausprobieren:

function getSelectedText() {
  var txt = '';

  if (window.getSelection) {
    txt = window.getSelection();
  }
  else if (document.getSelection) {
    txt = document.getSelection();
  }
  else if (document.selection) {
    txt = document.selection.createRange().text;
  }
  else return; 

  return txt;
}

Diese Funktion gibt ein Objekt zurück, das die Textauswahl darstellt.Es funktioniert browserübergreifend (obwohl ich vermute, dass die zurückgegebenen Objekte je nach Browser leicht unterschiedlich sein werden und nur für den tatsächlichen Text des Ergebnisses und nicht für die zusätzlichen Eigenschaften zuverlässig sind).

Notiz:Ich habe dieses Codefragment ursprünglich hier entdeckt: http://www.codetoad.com/javascript_get_selected_text.asp

Answer 3

Einführung in die Reichweite enthält einige Details dazu, wie verschiedene Browser Ihnen Zugriff auf die Textauswahl ermöglichen.

Ich habe die Erfahrung gemacht, dass die direkte Arbeit mit diesen verschiedenen APIs recht umständlich ist wrapSelection funktioniert für dich, ich würde damit weitermachen.

Answer 4

Heutzutage diese Methode sollte genug sein:

function getSelectedText() {
    return window.getSelection ? window.getSelection().toString() : '';
}

Es wird zurückkehren '' In seltenen Fällen handelt es sich um wirklich alte Browser und kann im Fall von Opera Mini der Fall sein (muss getestet werden, obwohl dies möglicherweise veraltet ist) + siehe Hinweis für UC Browser für Android.

Answer 5

Das Verhalten einzelner Browser hinsichtlich der Auswahl ist hier beschrieben.

Answer 6

Dieser Code funktioniert in Safari, IE und Firefox – ich hoffe, er hilft

var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();
str = str.text || str;
str = str + ''; // the best way to make object a string...