¿Es posible obtener el texto resaltado en un párrafo de un sitio web, por ejemplo, usando jQuery?
¿Es posible obtener el texto resaltado en un párrafo de un sitio web, por ejemplo, usando jQuery?
Respuestas:
Obtener el texto que el usuario ha seleccionado es relativamente simple. No se obtiene ningún beneficio al involucrar a jQuery ya que no necesita nada más que los objetos window
y 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;
}
Si está interesado en una implementación que también se ocupe de selecciones <textarea>
y <input>
elementos de texto, puede usar lo siguiente. Como ahora es 2016, estoy omitiendo el código requerido para IE <= 8, pero he publicado cosas para eso en muchos lugares en 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>
window.getSelection()
). La document.selection.type
verificación prueba que la selección es una selección de texto en lugar de una selección de control. En IE, una selección de control es una selección dentro de un elemento editable que contiene uno o más elementos (como imágenes y controles de formulario) con contornos y controladores de tamaño. Si llama .createRange()
a una selección de este tipo, obtiene una en ControlRange
lugar de una TextRange
y ControlRange
no tiene ninguna text
propiedad.
selectionStart
o selectionEnd
en un <input>
tipo de elemento (como "número") que no admitirlo (ver jsfiddle.net/6zoposby/2 , por ejemplo). Dejé el cheque por la existencia de selectionStart
modo que el código no se rompa en IE <= 8. Admito que el cheque para activeElement
probablemente sea excesivo ahora. Lo uso slice
porque es más poderoso (aunque eso no es útil aquí) y un poco más corto para escribir que substring
.
Obtenga el texto resaltado de esta manera:
window.getSelection().toString()
y, por supuesto, un tratamiento especial para, por ejemplo:
document.selection.createRange().htmlText
document.selection
soporte se eliminó en IE10 y se reemplazó con window.getSelection
". Fuente: connect.microsoft.com/IE/feedback/details/795325/…
Esta solución funciona si está usando Chrome (no puede verificar otros navegadores) y si el texto se encuentra en el mismo elemento DOM:
window.getSelection().anchorNode.textContent.substring(
window.getSelection().extentOffset,
window.getSelection().anchorOffset)
Uso window.getSelection().toString()
.
Puedes leer más en developer.mozilla.org