Copiar en el portapapeles únicamente el texto seleccionado de un campo textarea

Te paso dos ejemplos de código con dos mecanismos de copiado en el portapapeles que puedes usar.

En ambos partimos de un elemento textarea como este:

<textarea id="texto">
Este es un ejemplo de texto que se puede seleccionar y del que se puede copiar solo una parte al portapapeles.
</textarea>
<button onclick="copiarSeleccion()">Copiar Selección</button>

Usando el api de clipboard

Si quieres utilizar la API moderna del portapapeles (navigator.clipboard.writeText()), que es más seguro y recomendado para nuevos desarrollos en aplicaciones web modernas.

El JavaScript siguiente empleará navigator.clipboard.writeText() para manejar la copia al portapapeles:

function copiarSeleccion() {
    // Obtener el elemento textarea
    var textarea = document.getElementById('texto');
    
    // Obtener la selección actual del usuario en el textarea
    var textoSeleccionado = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
    
    // Comprobar si hay algo seleccionado
    if (textoSeleccionado.length > 0) {
        // Usar la API del portapapeles para copiar el texto seleccionado
        navigator.clipboard.writeText(textoSeleccionado)
            .then(() => {
                // Mensaje de éxito
                alert("Texto copiado al portapapeles: " + textoSeleccionado);
            })
            .catch(err => {
                // Mensaje de error en caso de que algo falle
                console.error('Error al copiar texto: ', err);
                alert("No se pudo copiar el texto, por favor intente nuevamente.");
            });
    } else {
        alert("Por favor seleccione el texto que quiere copiar.");
    }
}

Como puedes ver, el API del Portapapeles: usa navigator.clipboard.writeText(). Lo que pasa es que maneja la operación de manera asincrónica y requiere de esperar que se resuelvan las operaciones de la promesa.

• .then() se ejecuta si la operación de copia es exitosa, mostrando una alerta de éxito.
• .catch() se ejecuta si hay un error durante el proceso de copia, mostrando un mensaje de error y registrando el error en la consola.

Es importante manejar los posibles errores, especialmente porque las operaciones con el portapapeles pueden fallar por varias razones, como políticas de seguridad del navegador que pueden requerir que la acción de copiado sea iniciada directamente por una acción del usuario (como un clic), o que el sitio funcione por HTTPS.

Mecanismo antiguo basdo en un campo input creado en memoria por Javascript

Puedes usar un mecanismo más antiguo que no usa e l api de clipboard y que se basa en la creación dinámica de un campo input. El código HTML sería el mismo, de modo que veremos el script JavaScript.

function copiarSeleccion() {
    // Obtener el elemento textarea
    var textarea = document.getElementById('texto');
    
    // Obtener la selección actual del usuario en el textarea
    var textoSeleccionado = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
    
    // Comprobar si hay algo seleccionado
    if (textoSeleccionado.length > 0) {
        // Crear un elemento input temporal y asignarle el texto seleccionado
        var inputTemporal = document.createElement("input");
        inputTemporal.setAttribute("value", textoSeleccionado);
        document.body.appendChild(inputTemporal);
        
        // Seleccionar el texto del input temporal
        inputTemporal.select();
        
        // Usar el comando de copiado
        document.execCommand('copy');
        
        // Eliminar el input temporal
        document.body.removeChild(inputTemporal);
        
        // Opcional: alerta para confirmar que se ha copiado
        alert("Texto copiado al portapapeles: " + textoSeleccionado);
    } else {
        alert("Por favor seleccione el texto que quiere copiar.");
    }
}

Como ves, la Obtención del texto seleccionado funciona igual que antes, usando textarea.selectionStart y textarea.selectionEnd para extraer la porción del texto que está seleccionada.

Pero ahora en cambio, para copiar el texto, el script crea dinámicamente un elemento input, pone el texto seleccionado en él, selecciona el texto dentro de este input, y luego usa el comando document.execCommand('copy') para copiarlo al portapapeles añadimos el input al documento y luego el input temporal es eliminado del documento. Esto ocurre instantáneamente por lo que el usuario no llegará a verlo.

La clave la tienes en los valores textarea.selectionStart y textarea.selectionEnd, que te entregan las posiciones donde empieza y termina el área seleccionada en un textarea (y funciona equivalentemente en otros elemntos de input).

De este modo, si quieres obtener el texto en el elemento seleccionado haces lo siguiente:

const element = document.getElementById('mi_textarea');
const text = element.value.substring(element.selectionStart, element.selectionEnd);

A partir de ahí sería similar a lo que hemos explicado en el artículo dedicado a copiar texto con el portapapeles de Javascript.