Получить выделенный / выделенный текст

Question

Можно ли получить выделенный текст в абзаце веб-сайта, например, с помощью jQuery?

Answer 1

Получить текст, выбранный пользователем, относительно просто. Привлечение jQuery не принесет никакой пользы, поскольку вам не нужно ничего, кроме window а также 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;
}

Если вы заинтересованы в реализации, которая также будет иметь дело с выборами в <textarea> и текстовый <input> элементы, вы можете использовать следующее. Так как сейчас 2016, я опускаю код, необходимый для поддержки IE <= 8, но я написал материал для этого во многих местах на 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>

Answer 2

Получить выделенный текст следующим образом:

window.getSelection().toString()

и, конечно, особый режим для:

document.selection.createRange().htmlText

Answer 3

Использовать window.getSelection().toString().

Вы можете узнать больше на developer.mozilla.org.

Answer 4

Это решение работает, если вы используете Chrome (не можете проверить другие браузеры) и если текст находится в том же элементе DOM:

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

Answer 5

Да, вы можете сделать это с помощью простого фрагмента HMTL:(обратите внимание, что этот фрагмент использует VueJs)

document.addEventListener('mouseup', event => {  
    if(window.getSelection().toString().length){
       let exactText = window.getSelection().toString();        
    }
}

Answer 6

Вы можете использовать событие, если хотите

          document.addEventListener('selectionchange', (e)=>{
        console.log("Archor node - ",window.getSelection().anchorNode);
        console.log("Focus Node - ",window.getSelection().toString());
    });