Vurgulanan / Seçilen metni alma

351

Vurgulanan metni örneğin jQuery kullanarak bir web sitesinin paragrafında elde etmek mümkün müdür?

javascript jquery textselection

— Dan
kaynak

2

İşte çalışan bir çözüm dipaksblogonline.blogspot.in/2014/11/…

— Dipak

Basit javascript benim için çalıştı. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)

— Rohit Verma

@RohitVerma: Bu, yalnızca tek bir metin düğümünde yer alan bir seçimin basit durumunda işe yarayacaktır, ki bu kesinlikle garanti edilmez.

— Tim Down

@Dipak Yayınınızda referans verdiğiniz blogdaki sosyal paylaşım işlevini nasıl kopyalıyorsunuz? Sadece seçilen dizeyi döndürmek yerine, bu değişkeni bir twitter bağlantısına doldurmaya çalışıyorum.

482

Kullanıcının seçtiği metni almak nispeten basittir. windowVe documentnesnelerinden başka bir şeye ihtiyacınız olmadığından jQuery'yi dahil ederek kazanılmanın bir yararı yoktur .

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;
}

Seçimler <textarea>ve metin <input>öğeleriyle de ilgilenecek bir uygulama ile ilgileniyorsanız , aşağıdakileri kullanabilirsiniz. Şimdi 2016 beri IE <= 8 desteği için gerekli kodu atlıyorum ama SO birçok yerde bunun için şeyler yayınladım.

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>

Snippet'i genişlet

— Tim Down
kaynak

9

{} -Fork iyi olursa başka ne olabilir? "Kontrol" ne hakkında?

— Dan

29

@Dan: Üzgünüm, bu soruyu kaçırdım (SO'nun beni uyartığını düşünmeyin). İkinci dal IE <= 8 (IE 9 uygular window.getSelection()) içindir. document.selection.typeÇek seçimi bir metin seçimi ziyade bir kontrol seçimi olduğunu test ediyor. IE'de, bir kontrol seçimi, düzenlenebilir bir öğenin içinde, anahatlar ve yeniden boyutlandırma tutamaçları olan bir veya daha fazla öğe (görüntüler ve form denetimleri gibi) içeren bir seçimdir. .createRange()Böyle bir seçim çağırırsanız , a ControlRangeyerine bir olsun TextRangeve ControlRanges textözelliği yok .

— Tim Down

2

@TimDown "jQuery'de X yok" demek çok ince bir buz, çünkü elbette, doğru eklenti ile javascript ile tarayıcıda yapabileceğiniz her şeyi yapabilir. Bu durumda, jquery.selection ( madapaja.github.io/jquery.selection ) var. "Ne de olmalı" demek eşit derecede yanlıştır. Buraya geldim çünkü tam olarak bunu arıyordum. Bir kullanım durumum var ve jQuery doğru çözümdür.

— Auspex

8

@Auspex: Ne demek istediğini anlıyorum ama katılmıyorum. JQuery eklentisi, jQuery bağımlılığı olan bir kitaplıktır; kendisi jQuery değildir. Seçim işleme durumunda, jQuery'nin kendisi tam olarak hiçbir şey sağlamaz (ki bu, seçim işlemesi jQuery'nin amacı olmadığı için olması gerektiği gibi), bu nedenle jQuery kullanan herhangi bir çözüm tesadüfen kullanıyor.

— Tim Down

1

@ Dennis98: Uzaktan rahatsız değil veya kırgın değilim :) Giriş türlerinin kontrolü, erişmeye çalıştığınızda Chrome'daki konsolda selectionStartveya olmayan selectionEndbir <input>öğe türünde ("sayı" gibi) uyarı almanızdır. destekleyin ( örneğin bkz. jsfiddle.net/6zoposby/2 ). Ben selectionStartkodu IE <= 8 kırmayacak şekilde varlığı için kontrol bıraktı . Ben kontrol için activeElementmuhtemelen şimdi overkill olduğunu itiraf . Kullanıyorum sliceçünkü daha güçlü (burada kullanışlı olmasa da) ve yazmaktan biraz daha kısa substring.

— Tim Down

111

Vurgulanan metni şu şekilde alın:

window.getSelection().toString()

ve elbette, örneğin:

document.selection.createRange().htmlText

— Parpar
kaynak

2

IE> = 10 için “ document.selection IE10'da destek kaldırıldı ve onunla değiştirildi window.getSelection ”. Kaynak: connect.microsoft.com/IE/feedback/details/795325/…

— user2314737

Bu, çeşitli tarayıcılarda (ör. Firefox) birden fazla koşulda başarısız olur.

— Makyen

11

Bu çözüm, krom kullanıyorsanız (diğer tarayıcıları doğrulayamıyorsanız) ve metin aynı DOM Öğesinde bulunuyorsa çalışır:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

— Andrew Kennedy
kaynak

0

Kullanın window.getSelection().toString().

Developer.mozilla.org adresinden daha fazla bilgi edinebilirsiniz

— Ebuka
kaynak