¿Cómo copiar texto al portapapeles usando JavaScript?

Question

learn_code27 · 09.05.2026

¿Cómo copiar texto al portapapeles usando JavaScript?

¡Hola a todos! Soy un desarrollador frontend principiante y me encontré con una tarea que parece simple pero me causa dificultades. Necesito implementar un botón "Copiar" en la página para que el usuario pueda copiar texto (por ejemplo, un enlace, código o contraseña generada) al portapapeles con un solo clic. Intenté usar `document.execCommand('copy')`, pero me encuentro con que en algunos navegadores funciona de manera inestable, y en la consola aparecen advertencias de que el método está obsoleto. Además, no entiendo completamente cómo seleccionar correctamente el texto antes de copiarlo si no está en un `` o `

`, sino, digamos, en un `<div>` o `<p>` normal.

Aquí hay un ejemplo de mi código que no funciona correctamente:

```javascript
function copyText() {
  const text = document.getElementById('myText').innerText;
  // ¿Cómo copiar 'text' al portapapeles ahora?
  // Intenté hacerlo así, pero no funcionó:
  document.execCommand('copy');
}
```

Por favor, indíquenme una forma moderna                    </div>

<div class="question__footer">
                        <div class="question-footer__item question-footer__item-comment">
                            <svg aria-hidden="true" fill="#fff" height="16" viewBox="0 0 20 20" width="16">
                                <path d="M10 19H1.871a.886.886 0 0 1-.798-.52.886.886 0 0 1 .158-.941L3.1 15.771A9 9 0 1 1 10 19Zm-6.549-1.5H10a7.5 7.5 0 1 0-5.323-2.219l.54.545L3.451 17.5Z"/>
                            </svg>
                            <span class="question-footer__item-text">
                                0 respuestas                            </span>
                        </div>
                    </div>
                </div>

<div class="answers" id="answers-9435">
                                            <p>No answers yet.</p>
                    
                    
                                            <p style="color:#748791;padding:10px 0">
                            <a href="/login" style="color:#e92323">
                                Inicia sesión                            </a>
                             para dejar una respuesta                        </p>
                    
                    
                    <section class="books-recomends recomends-block"
                             aria-label="Blogs">
                        <h2 class="recomends-title">
                            Blogs                        </h2>
                        <div class="blogs-container">
                                                            <a href="/es/post1806"
                                   title="GraphQL API con Go: tutorial paso a paso para principiantes">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1580121441575-41bcb5c6b47c?w=800&q=80"
                                                 alt="GraphQL API con Go: tutorial paso a paso para principiantes"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">GraphQL API con Go: tutorial paso a paso para principiantes</h3>
                                    </div>
                                </a>
                                                            <a href="/es/post5628"
                                   title="Serverless en Rust: Más rápido que AWS Lambda con arranque en frío">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1580121441575-41bcb5c6b47c?w=800&q=80"
                                                 alt="Serverless en Rust: Más rápido que AWS Lambda con arranque en frío"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Serverless en Rust: Más rápido que AWS Lambda con arranque en frío</h3>
                                    </div>
                                </a>
                                                    </div>
                    </section>
                </div>
            </article>

<aside class="discussion-sidebar-wrapper" aria-label="Сайдбар">
                
                <div class="discussion-sidebar">
                    <h2 class="discussion-sidebar__title">
                        Recientes                    </h2>
                                            <div class="discussion-sidebar__item">
                            <a href="/es/forum11073"
                               class="sidebar-question"
                               title="Cómo llamar programáticamente al manejador de tap gesture en un UIView en Swift">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        dev_junior58                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Cómo llamar programáticamente al manejador de tap gesture en un UIView en Swift                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respuestas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/es/forum11072"
                               class="sidebar-question"
                               title="¿Qué es // MARK en Swift y cómo usar correctamente esta directiva en Xcode?">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        dev_junior39                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    ¿Qué es // MARK en Swift y cómo usar correctamente esta directiva en Xcode?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respuestas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/es/forum11071"
                               class="sidebar-question"
                               title="Convertir cadena a fecha (Date) en Swift: guía completa">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        code_learner82                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Convertir cadena a fecha (Date) en Swift: guía completa                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respuestas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/es/forum11070"
                               class="sidebar-question"
                               title="Extracción de coincidencias de expresiones regulares en Swift">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        program_me36                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Extracción de coincidencias de expresiones regulares en Swift                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respuestas</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/es/forum11069"
                               class="sidebar-question"
                               title="¿Cuántos niveles de anidamiento de pointers puede haber en C++?">
                                <div class="sidebar-question__header">
                                    <img src="/images/default-ava.png" alt="Avatar"
                                         class="discussion__user-ava" loading="lazy" width="24" height="24">
                                    <strong class="sidebar-question__username">
                                        stack_user85                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    ¿Cuántos niveles de anidamiento de pointers puede haber en C++?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 respuestas</span>
                                </div>
                            </a>
                        </div>
                    </div>

</aside>
</div>

<section class="prelink-block" aria-label="Preguntas similares">
  <h3 class="prelink-block__title">Preguntas similares</h3>
  <div class="prelink-block__list">
                <a class="prelink-block__item" href="/es/forum9029">
                <span class="prelink-block__name"> Cómo eliminar duplicados de un array y obtener solo valores únicos en JavaScript</span>
      </a>
                <a class="prelink-block__item" href="/es/forum8815">
                <span class="prelink-block__name"> ¿Cuál es la diferencia entre call y apply en JavaScript?</span>
      </a>
                <a class="prelink-block__item" href="/es/forum8115">
                <span class="prelink-block__name"> Cómo obtener el id del usuario en aiogram</span>
      </a>
                <a class="prelink-block__item" href="/es/forum8546">
                <span class="prelink-block__name"> ¿Cómo hacer un redirect (redirección) en PHP?</span>
      </a>
                <a class="prelink-block__item" href="/es/forum10806">
                <span class="prelink-block__name"> ¿Cómo leer variables de entorno en Node.js?</span>
      </a>
      </div>
</section>

<script src="/js/jquery-3.6.1.min.js"></script>

<script defer src="/js/bootstrap.bundle.min.js"></script>
<script defer src="/js/main.js"></script>

<script>
(function () {
    var loaded = false;

// dataLayer и gtag объявляем ДО загрузки скрипта — GA сам его найдёт
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    window.gtag = gtag; // делаем глобальным, чтобы была доступна везде

function loadAnalytics() {
        if (loaded) return;
        loaded = true;

// Снимаем все слушатели сразу
        EVENTS.forEach(function (e) {
            window.removeEventListener(e, loadAnalytics, { passive: true });
        });

// ── Яндекс.Метрика ────────────────────────────────────────
        (function (m, e, t, r, i, k, a) {
            m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments); };
            m[i].l = 1 * new Date();
            // Не грузим дважды, если тег уже есть
            for (var j = 0; j < document.scripts.length; j++) {
                if (document.scripts[j].src === r) return;
            }
            k = e.createElement(t);
            a = e.getElementsByTagName(t)[0];
            k.async = 1;
            k.src = r;
            a.parentNode.insertBefore(k, a);
        })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');

ym(109681950, 'init', {
            clickmap:          true,
            trackLinks:        true,
            accurateTrackBounce: true,
            webvisor:          true
        });

// ── Google Analytics ──────────────────────────────────────
        var gaScript = document.createElement('script');
        gaScript.src   = 'https://www.googletagmanager.com/gtag/js?id=G-3NHBQWNX9T';
        gaScript.async = true;
        // После загрузки скрипта инициализируем конфиг
        gaScript.onload = function () {
            gtag('js',     new Date());
            gtag('config', 'G-3NHBQWNX9T');
        };
        document.head.appendChild(gaScript);
    }

// Запускаем через 3 секунды ИЛИ при первом взаимодействии
    var timer  = setTimeout(loadAnalytics, 3000);
    var EVENTS = ['scroll', 'click', 'mousemove', 'touchstart', 'keydown'];

EVENTS.forEach(function (e) {
        window.addEventListener(e, function fireOnce() {
            clearTimeout(timer);       // отменяем таймер — пользователь уже здесь
            loadAnalytics();
            window.removeEventListener(e, fireOnce, { passive: true });
        }, { passive: true });
    });

})();
</script>

<noscript>
    <div>
        <img src="https://mc.yandex.ru/watch/109681950"
             style="position:absolute;left:-9999px"
             alt="Яндекс.Метрика">
    </div>
</noscript>

<div id="cookie-overlay">
    <div class="co-box">
        <div class="co-icon">🍪</div>
        <div class="co-title">Сначала примите условия</div>
        <p class="co-text">
            Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie.
            Мы используем их для авторизации и улучшения работы сайта.<br><br>
            <a href="/privacy" target="_blank">Политика конфиденциальности</a>
        </p>
        <button class="co-accept" onclick="cookieConsentAccept()">Принять и продолжить</button>
        <button class="co-skip" onclick="document.getElementById('cookie-overlay').classList.remove('active')">Закрыть</button>
    </div>
</div>

<div id="cookie-banner">
    <div class="cb-inner">
        <div class="cb-text">
            🍪 Мы используем <strong>файлы cookie</strong> для авторизации, аналитики и улучшения работы сайта.
            Продолжая пользоваться сайтом, вы соглашаетесь с нашей
            <a href="/privacy" target="_blank">политикой конфиденциальности</a>.
        </div>
        <div class="cb-buttons">
            <button class="cb-accept" onclick="cookieConsentAccept()">Принять</button>
            <button class="cb-necessary" onclick="cookieConsentNecessary()">Только необходимые</button>
        </div>
    </div>
</div>

function getCk(name) {
        var m = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
        return m ? decodeURIComponent(m[1]) : null;
    }
    function setCk(name, val) {
        var exp = new Date();
        exp.setFullYear(exp.getFullYear() + 1);
        document.cookie = name + '=' + encodeURIComponent(val)
            + '; expires=' + exp.toUTCString()
            + '; path=/; SameSite=Lax';
    }

// Принять всё
    window.cookieConsentAccept = function () {
        setCk(KEY, 'accepted');
        hideBanner();
        document.getElementById('cookie-overlay').classList.remove('active');
        // Если была попытка перейти на логин — редиректим
        if (window._ckPendingHref) {
            window.location.href = window._ckPendingHref;
            window._ckPendingHref = null;
        }
    };

// Только необходимые (баннер убираем, но трекинг не разрешаем)
    window.cookieConsentNecessary = function () {
        setCk(KEY, 'necessary');
        hideBanner();
    };

function hideBanner() {
        var b = document.getElementById('cookie-banner');
        if (b) b.style.display = 'none';
    }
    function showBanner() {
        var b = document.getElementById('cookie-banner');
        if (b) b.style.display = 'block';
    }

// При загрузке: если согласие не дано — показываем баннер
    if (!getCk(KEY)) {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', showBanner);
        } else {
            showBanner();
        }

// Перехватываем клики на /login и /registration
        document.addEventListener('click', function (e) {
            var el = e.target.closest('a[href]');
            if (!el) return;
            var href = el.getAttribute('href') || '';
            // Используем el.href — он всегда абсолютный, ловим и "login" и "/login"
            var normalizedHref = el.href || href;
            var isAuth = /\/login(\?|$|#)/i.test(normalizedHref) || /\/registration(\?|$|#)/i.test(normalizedHref);
            if (isAuth) {
                e.preventDefault();
                e.stopImmediatePropagation();
                window._ckPendingHref = href;
                document.getElementById('cookie-overlay').classList.add('active');
            }
        }, true);
    }
})();
</script>
</body>
</html>