How to copy text to clipboard using JavaScript?

Question

learn_code27 · 09.05.2026

How to copy text to clipboard using JavaScript?

Hello everyone! I'm a beginner frontend developer and I've encountered a task that seems simple but is causing me difficulties. I need to implement a "Copy" button on the page so that the user can copy text (for example, a link, code, or generated password) to the clipboard with one click. I tried using `document.execCommand('copy')`, but I'm running into issues where it works inconsistently in some browsers, and warnings appear in the console that the method is deprecated. Additionally, I don't fully understand how to properly select text before copying if it's not in an `` or `

`, but, say, in a regular `<div>` or `<p>`.

Here's an example of my code that doesn't work properly:

```javascript
function copyText() {
  const text = documen                    </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 responses                            </span>
                        </div>
                    </div>
                </div>

<div class="answers" id="answers-3120">
                                            <p>No answers yet.</p>
                    
                    
                                            <p style="color:#748791;padding:10px 0">
                            <a href="/login" style="color:#e92323">
                                Log in                            </a>
                             to leave an answer                        </p>
                    
                    
                    <section class="books-recomends recomends-block"
                             aria-label="Blogs">
                        <h2 class="recomends-title">
                            Blogs                        </h2>
                        <div class="blogs-container">
                                                            <a href="/post608"
                                   title="Microservices in C#: Architecture and Practice for .NET Developers">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159?w=800&q=80"
                                                 alt="Microservices in C#: Architecture and Practice for .NET Developers"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Microservices in C#: Architecture and Practice for .NET Developers</h3>
                                    </div>
                                </a>
                                                            <a href="/post3212"
                                   title="Pointers vs. Values in Go: How Not to Kill Performance">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&q=80"
                                                 alt="Pointers vs. Values in Go: How Not to Kill Performance"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Pointers vs. Values in Go: How Not to Kill Performance</h3>
                                    </div>
                                </a>
                                                            <a href="/post3698"
                                   title="Array 1…N in JavaScript: Secrets of Speed and Performance">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1580121441575-41bcb5c6b47c?w=800&q=80"
                                                 alt="Array 1…N in JavaScript: Secrets of Speed and Performance"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Array 1…N in JavaScript: Secrets of Speed and Performance</h3>
                                    </div>
                                </a>
                                                            <a href="/post4370"
                                   title="Testing PHP Code: A Beginner's Guide from Zero to Your First Test">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=800&q=80"
                                                 alt="Testing PHP Code: A Beginner's Guide from Zero to Your First Test"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Testing PHP Code: A Beginner's Guide from Zero to Your First Test</h3>
                                    </div>
                                </a>
                                                            <a href="/post4555"
                                   title="Python Backend Tech Stack: Essential Tools & Frameworks">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://quasa.io/storage/images/news/typz75xQMhTqSLsDJn7d2c5BVD49wIXUAy9jubNl.webp"
                                                 alt="Python Backend Tech Stack: Essential Tools & Frameworks"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Python Backend Tech Stack: Essential Tools & Frameworks</h3>
                                    </div>
                                </a>
                                                    </div>
                    </section>
                </div>
            </article>

<aside class="discussion-sidebar-wrapper" aria-label="Сайдбар">
                
                <div class="discussion-sidebar">
                    <h2 class="discussion-sidebar__title">
                        Latest                    </h2>
                                            <div class="discussion-sidebar__item">
                            <a href="/forum7734"
                               class="sidebar-question"
                               title="Python self-motion code">
                                <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">
                                                                            </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Python self-motion code                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 responses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/forum7733"
                               class="sidebar-question"
                               title="MTS Tech Arena">
                                <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">
                                                                            </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    MTS Tech Arena                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 responses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/forum7732"
                               class="sidebar-question"
                               title="Iterating over std::vector: unsigned vs signed index — which to choose?">
                                <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">
                                        alex_dev11                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Iterating over std::vector: unsigned vs signed index — which to choose?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 responses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/forum7731"
                               class="sidebar-question"
                               title="Error in Rust: "expected a literal" when using println! — how to fix?">
                                <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">
                                        js_student13                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Error in Rust: "expected a literal" when using println! — how to fix?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 responses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/forum7730"
                               class="sidebar-question"
                               title="ESLint error: Cannot read file '.../tsconfig.json' — how to fix?">
                                <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">
                                        byte_coder98                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    ESLint error: Cannot read file '.../tsconfig.json' — how to fix?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 responses</span>
                                </div>
                            </a>
                        </div>
                    </div>

</aside>
</div>

<section class="prelink-block" aria-label="Similar questions">
  <h3 class="prelink-block__title">Similar questions</h3>
  <div class="prelink-block__list">
                <a class="prelink-block__item" href="/forum1181">
                <span class="prelink-block__name"> Which comparison operator to use in JavaScript: == or ===?</span>
      </a>
                <a class="prelink-block__item" href="/forum2573">
                <span class="prelink-block__name"> How to programmatically move cursor to end of text in EditText in Kotlin?</span>
      </a>
                <a class="prelink-block__item" href="/forum3947">
                <span class="prelink-block__name"> Removing objects from a collection in a loop without ConcurrentModificationException</span>
      </a>
                <a class="prelink-block__item" href="/forum7244">
                <span class="prelink-block__name"> How to execute code only when Option is None in Rust?</span>
      </a>
                <a class="prelink-block__item" href="/forum6025">
                <span class="prelink-block__name"> TypeScript error: "File name differs from already included file name only in casing" on Windows</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>