Uzyskaj wyróżniony / wybrany tekst

351

Czy można uzyskać wyróżniony tekst w akapicie strony internetowej, np. Przy użyciu jQuery?

javascript jquery textselection Dan
źródło
2
Oto działające rozwiązanie dipaksblogonline.blogspot.in/2014/11/…
Dipak
Prosty javascript działał dla mnie. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)
Rohit Verma
@RohitVerma: Działa to tylko w prostym przypadku zaznaczenia zawartego w pojedynczym węźle tekstowym, co w żadnym wypadku nie jest gwarantowane.
Tim Down
@Dipak Jak powielasz funkcję udostępniania społecznościowego z bloga, do którego odwołujesz się w swoim poście? Zamiast zwracać tylko wybrany ciąg, próbuję zapełnić tę zmienną linkiem do Twittera.

Odpowiedzi:

481

Uzyskanie tekstu wybranego przez użytkownika jest stosunkowo proste. Zaangażowanie jQuery nie przynosi korzyści, ponieważ nie potrzebujesz niczego poza obiektami windowi 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;
}

Jeśli interesuje Cię implementacja, która będzie również zajmować się zaznaczeniami <textarea>i <input>elementami tekstowymi , możesz użyć następujących. Ponieważ jest teraz 2016, pomijam kod wymagany do obsługi IE <= 8, ale opublikowałem na ten temat wiele rzeczy w SO.

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>
Rozwiń fragment kodu

Tim Down
źródło
9
Co jeszcze jest, jeśli {} - działa dobrze? o czym jest „Kontrola”?
Dan
29
@ Dan: Przepraszam, przeoczyłem to pytanie (nie sądzę, że SO mnie o tym powiadomiło). Druga gałąź dotyczy IE <= 8 (IE 9 implementuje window.getSelection()). document.selection.typeCheck testuje że wybór jest wybór tekstu, a nie wybór sterowania. W IE zaznaczenie kontrolne to zaznaczenie wewnątrz edytowalnego elementu zawierającego jeden lub więcej elementów (takich jak obrazy i kontrolki formularzy) z konturami i uchwytami zmiany rozmiaru. Jeśli wybierzesz .createRange()taki wybór, otrzymasz ControlRangeraczej niż a TextRangei ControlRanges nie mają żadnej textwłaściwości.
Tim Down
2
@TimDown To bardzo cienki lód, żeby powiedzieć „jQuery nie ma X”, ponieważ oczywiście przy odpowiedniej wtyczce może zrobić wszystko, co możesz zrobić w przeglądarce za pomocą javascript. W tym przypadku mamy plik jquery.selection ( madapaja.github.io/jquery.selection ). Równie błędne jest mówienie „nie powinno”. Przybyłem tutaj, ponieważ właśnie tego szukałem. Mam przypadek użycia, a jQuery jest właściwym rozwiązaniem.
Auspex
8
@Auspex: Rozumiem twój punkt widzenia, ale się nie zgadzam. Wtyczka jQuery to biblioteka zależna od jQuery; to nie jest jQuery. W przypadku obsługi selekcji samo jQuery nie zapewnia dokładnie nic (co powinno być, ponieważ obsługa selekcji nie jest tym, do czego służy jQuery), więc każde rozwiązanie korzystające z jQuery korzysta z niej przypadkowo.
Tim Down
1
@ Dennis98: Nie jestem zdenerwowany ani obrażony :) Sprawdzanie typów danych wejściowych polega na tym, że pojawia się ostrzeżenie w konsoli w Chrome, jeśli próbujesz uzyskać dostęp selectionStartlub selectionEndw <input>typie elementu (np. „Liczba”), który nie obsługuje to (patrz na przykład jsfiddle.net/6zoposby/2 ). Zostawiłem sprawdzanie istnienia, selectionStartaby kod nie złamał się w IE <= 8. Przyznaję, że sprawdzenie activeElementjest prawdopodobnie teraz nadmierne. Używam, sliceponieważ jest mocniejszy (choć nie jest to przydatne tutaj) i jest nieco krótszy niż w przypadku pisania substring.
Tim Down
111

Uzyskaj wyróżniony tekst w ten sposób:

window.getSelection().toString()

i oczywiście specjalne traktowanie np. dla:

document.selection.createRange().htmlText
PARPAR
źródło
2
Dla IE> = 10 „ document.selection wsparcie zostało usunięte w IE10 i zastąpione przez window.getSelection ”. Źródło: connect.microsoft.com/IE/feedback/details/795325/…
user2314737
To się nie powiedzie pod wieloma warunkami w różnych przeglądarkach (np. Firefox).
Makyen,
11

To rozwiązanie działa, jeśli używasz chrome (nie możesz zweryfikować innych przeglądarek) i jeśli tekst znajduje się w tym samym elemencie DOM:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)
Andrew Kennedy
źródło
0

Zastosowanie window.getSelection().toString().

Możesz przeczytać więcej na developer.mozilla.org

Ebuka
źródło