¿Cómo puedo obtener el texto seleccionado en un área de texto? [duplicate]

4 minutos de lectura

avatar de usuario
jakub arnold

Estoy tratando de hacer mi propio WYSIWYG editor. ¿Hay alguna manera de obtener el texto que tiene el usuario seleccionado en un área de texto?

Por ejemplo, si el usuario selecciona alguna palabra y luego hace clic en el botón, ¿cómo averiguo qué texto se seleccionó?

Estoy usando jQuery.

  • Mira esta pregunta: stackoverflow.com/questions/401593/…

    – tvanfosson

    4 de abril de 2009 a las 15:08

avatar de usuario
abe honesto

window.getSelection().toString() funcionó para mí con Chrome, pero no firefox.

Para obtener el contenido seleccionado en un <textarea> con firefox:

function getSel() // JavaScript
{
    // Obtain the object reference for the <textarea>
    var txtarea = document.getElementById("mytextarea");

    // Obtain the index of the first selected character
    var start = txtarea.selectionStart;

    // Obtain the index of the last selected character
    var finish = txtarea.selectionEnd;

    // Obtain the selected text
    var sel = txtarea.value.substring(start, finish);


    // Do something with the selected content
}

También podrías usar elemento activo en vez de getElementById.

Referencia:

  • window.getSelection().toString() hace exactamente lo mismo, y no necesita saber la identificación del área de texto. No puede tener selecciones múltiples en diferentes áreas de texto al mismo tiempo.

    – Dan Dascalescu

    4 sep 2015 a las 11:24

  • @DanDascalescu Lo he intentado antes y ahora. Funciona con Chrome, pero no parece funcionar con FireFox.

    – Abe honesto

    4 sep 2015 a las 17:10

  • Correcto – resulta hay un error de Firefox presentado en 2001 ¡sobre window.getSelection() que no funciona en áreas de texto!

    – Dan Dascalescu

    04/09/2015 a las 23:58

  • De hecho, hay un error en Firefox, que se archivó en 2001 (!). Lo he mencionado en mi respuesta.

    – Dan Dascalescu

    5 sep 2015 a las 19:51

La selección de manejo es diferente para diferentes navegadores:

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // Opera
    userSelection = document.selection.createRange();
}

Eso te da un objeto de rango. Cada rango representa una sola selección (usando la tecla control/comando es posible hacer múltiples selecciones activas).

El tipo de objeto de rango que tiene ahora depende de qué navegador. Para IE es un objeto de rango de texto; para otros es un objeto de selección. Para convertir un objeto Selection en un rango de texto, puede llamar a getRangeAt; para Safari, necesitas construir eso:

var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else { // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}

El objeto de rango le proporciona los elementos dom iniciales y finales y el desplazamiento de texto de la selección.

Puede encontrar más información sobre los objetos de rango en quirksmode.org aquí

Si está utilizando jQuery, es posible que desee ver el Complemento ligero jQuery RTE de Batiste Bieler. Puede hacer lo suficiente para sus necesidades o al menos darle algo para empezar.

  • Respuesta muy útil e informativa.

    usuario257319

    7 de noviembre de 2015 a las 22:54

  • Puede que sea hora de una actualización.

    -Peter Mortensen

    9 de mayo a las 15:12


avatar de usuario
tpdi

obtenerseleccion()

Esto varía un poco según el navegador. Vea aquí una función que alega funcionar en la mayoría:
http://snipplr.com/view/775/getselection/

  • ¿Cómo se utiliza esta función en un determinado textarea elemento ?

    – Misha Moroshko

    25 de agosto de 2011 a las 7:38

  • El código anterior no funciona en el navegador Firefox (61.0.1) @tpdi

    – Lokesh S.

    13 de julio de 2018 a las 6:14

  • ¿Funciona el enlace? Redirige a una página de inicio de sesión (para la mayoría de las personas).

    -Peter Mortensen

    9 de mayo a las 15:10


avatar de usuario
eKek0

Pruebe el complemento jquery-fieldselection.

Puedes descargarlo desde aquí. Hay un ejemplo también.

avatar de usuario
Subín

Una pequeña función que obtendrá la cadena/texto seleccionado de un área de texto o un aporte elemento:

function getInputSelection(elem){
  if(typeof elem != "undefined"){
    s = elem[0].selectionStart;
    e = elem[0].selectionEnd;
    return elem.val().substring(s, e);
  }
  else{
    return '';
  }
}

Tenga en cuenta que el código anterior necesita jQuery para trabajar. Un ejemplo de obtener la cadena seleccionada de un elemento de entrada con id abc123 es:

getInputSelection($("#abc123"));

La función anterior devolverá la cadena seleccionada. Si no hay ninguna cadena seleccionada por el usuario, devolverá null.

Más ejemplos

getInputSelection($("body").find("input[name=user]"));

En los elementos seleccionados con nombre de clase, se devuelve la cadena seleccionada del primer elemento de la matriz de elementos y no la cadena seleccionada de todos los elementos. Después de todo, la selección en una página siempre será 1.

  • Muestra un ejemplo.

    – Sumner Evans

    20 de abril de 2014 a las 4:29

  • Me gusta la capacidad de pasar cualquier elemento a tu función, lo hace mucho más portátil/reutilizable.

    – Sumner Evans

    20 de abril de 2014 a las 14:59

avatar de usuario
Pedro Mortensen

function getSel() {
    var input = $("#text");
    return input.html().toString().substring(getSelection().baseOffset, getSelection().extendOffset);
}

  • Muestra un ejemplo.

    – Sumner Evans

    20 de abril de 2014 a las 4:29

  • Me gusta la capacidad de pasar cualquier elemento a tu función, lo hace mucho más portátil/reutilizable.

    – Sumner Evans

    20 de abril de 2014 a las 14:59

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad