Pasar al contenido principal
Jose Luján
Luis Avilés
Álvaro Felipe, Jon Mircha
Álvaro Felipe
Alberto Quiroga
Alexys Lozada, Álvaro Felipe, Daniel Romero, Jon Mircha
Daniel Romero
Alexys Lozada, Daniel Romero
Álvaro Felipe
Francisco Romero
Alexys Lozada
Álvaro Felipe
Jon Mircha
Álvaro Felipe
Daniel Romero
Daniel Romero
Jose Luján
Álvaro Felipe
Freddy Cahuas
Álvaro Felipe
Jon Mircha

Tip: Capturar y copiar texto seleccionado con JavaScript

Tip: Capturar y copiar texto seleccionado con JavaScript - Blog de Escuela Digital

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.

document.addEventListener('mouseup', () => {
  // nuestro código para capturar la selección
})

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.

document.addEventListener('mouseup', () => {
  let selected = window.getSelection().toString(); 
  console.log(selected)
});

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.

document.addEventListener('mouseup', () => {
  let selected = window.getSelection().toString(); 
  let copySelected = document.execCommand('copy');
  copySelected ? copySelected : console.log('sorry, your browser doesn\'t support execCommand')
});

¡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:

Photoshop Desde Cero

Photoshop es el estándar mundial de diseño y retoque fotográfico. Los principales profesionales del mundo lo usan en sus trabajos y...

Si este artículo te gustó suscríbete para recibir novedades del blog y promociones de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal