Un tour por window.getSelection()


El objeto window tiene varias funciones interesantes. Una de ellas es getSelection(), que permite obtener el texto seleccionado en una página web.

Un ejemplo

Imagina que eres desarrollador del CMS WordPress. Debes conocer que al redactar un artículo existe un espacio aparte para especificar el estracto del mismo, el cual muchas veces se toma textual de lo escrito.

En lugar de obligar al autor a copiar y pegar dicho contenido, puedes crear un pequeño script que lo realice por él:

var d = document,
    w = window,
    t = d.querySelector('textarea'),
    e = d.querySelector('input');

t.addEventListener('mouseup' , function(){
  e.value = w.getSelection();
});

En este caso se crea un evento mouseup sobre el textarea, el cual supuestamente contiene el texto del artículo, permitiendo que al seleccionar algo dentro de él se ejecute la función asociada e inserte dicha selección dentro del input que se encuentra almacenado en la variable e.

Por supuesto, el código anterior asume que se tiene un documento HTML con una estructura similar a la siguiente:

<input placeholder="extracto">

<hr>

<textarea cols="30" rows="6">Hola, esto es texto La primera parte no es interesante.

Pero este párrafo sí lo es y puede ser el extracto del artículo.</textarea>

No lo modifiques así

Al ejecutar el snippet anterior probablemente asumes que puedes modificar el resultado de la llamada a w.getSelection() como si fuese un String.

Negativo, tal llamada devuelve un objeto, con sus propio espaguetis de funciones y propiedades. Por tanto, si deseas realizar cualquier manipulación sobre el texto resultante de la selección, tienes que convertir el objeto a String:

w.getSelection().toString()

En el siguiente JS bin te dejo el ejemplo implementado en CoffeeScript para que juegues con él, lo modifiques a tu forma, e inspecciones el objeto w.getSelection().

JS Bin on jsbin.com

Conclusiones

Este método funciona en todos los navegadores, incluyendo a Internet Explorer 9+. Para versiones anteriores a IE9 (y solo para ellos), debes utilizar el método de esta forma:

w.selection.createRange()

y luego, para obtener el texto del objeto:

w.selection.createRange().htmlText

Como no deberías ejecutar ambos códigos a la vez, recomiendo uses algún mecanismo de detección de funciones en el navegador como Modernizr si deseas dar soporte completo para esta función.

De todas formas, ¿Quién utiliza aún IE6,7,8? ¿Mi recomendación final para despedir el artículo?

Fuck IE

happy scripting!