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.

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