Capturar el texto que un usuario selecciona tiene muchas utilidades, por ejemplo, mostrar un callout para compartir esa selección en Google (como hace Medium). También puedes usarlo para añadir un comentario específico sobre esa selección. O para responder un comentario citando una parte específica de este. Así que manos a la obra, porque es más fácil de lo que parece.
En primer lugar, necesitamos un evento que nos diga cuando el usuario ha seleccionado texto. Lamentablemente tal evento no existe, y drangend tampoco nos servirá porque solo se aplica a elementos que puede ser arrastrados. Así que recurriremos al veterano mouseup que nos detectará cuando el usuario suelte el botón el mouse.
1document.addEventListener('mouseup', () => { 2 // nuestro código para capturar la selección 3}) 4
Pues bien, tenemos la mitad solucionada. Para la otra mitad usaremos la API Selection, que como su nombre lo dice nos permite acceder al objeto Selection de window con todas sus propiedades y métodos. Usaremos el método toString() que nos devuelve el texto selecionado.
1document.addEventListener('mouseup', () => { 2 let selected = window.getSelection().toString(); 3 console.log(selected) 4}); 5
Copiar el texto seleccionado
Una aplicación práctica sería copiar el texto seleccionado en el portapapeles (y nos ahorramos un CTRL C). Para eso usaremos el método document.execCommand() el cual devolverá false si el navegador no lo soporta. Así que manos a la obra.
1document.addEventListener('mouseup', () => { 2 let selected = window.getSelection().toString(); 3 let copySelected = document.execCommand('copy'); 4 copySelected ? copySelected : console.log('sorry, your browser doesn\'t support execCommand') 5}); 6
¡Funciona! Pruébalo tú mismo (copia el código anterior, pegarlo en la consola del navegador, selecciona texto de esta página y compruébalo).
El método
document.execCommand()ejecuta diversas acciones sobre el texto seleccionado, como copiarlo, ponerlo en negrita, centrarlo, etc. (casi casi como un editor de texto clásico).
Más información: