Comment copier du texte dans le presse-papiers avec JavaScript ?

Question

learn_code27 · 09.05.2026

Comment copier du texte dans le presse-papiers avec JavaScript ?

Bonjour à tous ! Je suis un développeur frontend débutant et j'ai rencontré une tâche qui semble simple mais qui me pose des difficultés. Je dois implémenter un bouton "Copier" sur une page pour que l'utilisateur puisse copier du texte (par exemple, un lien, du code ou un mot de passe généré) dans le presse-papiers en un seul clic. J'ai essayé d'utiliser `document.execCommand('copy')`, mais je me heurte au fait que dans certains navigateurs, cela fonctionne de manière instable, et dans la console, des avertissements apparaissent indiquant que la méthode est obsolète. De plus, je ne comprends pas bien comment sélectionner correctement le texte avant de le copier s'il ne se trouve pas dans un `` ou `

`, mais par exemple dans un `<div>` ou `<p>` classique.

Voici un exemple de mon code qui ne fonctionne pas correctement :

```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 réponses                            </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">
                                Connectez-vous                            </a>
                             pour laisser une réponse                        </p>
                    
                    
                    <section class="books-recomends recomends-block"
                             aria-label="Blogs">
                        <h2 class="recomends-title">
                            Blogs                        </h2>
                        <div class="blogs-container">
                                                            <a href="/fr/post786"
                                   title="Comment réussir un entretien Rust : les questions les plus fréquentes">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?w=800&q=80"
                                                 alt="Comment réussir un entretien Rust : les questions les plus fréquentes"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Comment réussir un entretien Rust : les questions les plus fréquentes</h3>
                                    </div>
                                </a>
                                                            <a href="/fr/post1511"
                                   title="Go Struct en JSON : guide complet avec exemples pour débutants">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&q=80"
                                                 alt="Go Struct en JSON : guide complet avec exemples pour débutants"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Go Struct en JSON : guide complet avec exemples pour débutants</h3>
                                    </div>
                                </a>
                                                            <a href="/fr/post5235"
                                   title="Une journée dans la vie d'un développeur Kotlin : code, café et coroutines">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159?w=800&q=80"
                                                 alt="Une journée dans la vie d'un développeur Kotlin : code, café et coroutines"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Une journée dans la vie d'un développeur Kotlin : code, café et coroutines</h3>
                                    </div>
                                </a>
                                                    </div>
                    </section>
                </div>
            </article>

<aside class="discussion-sidebar-wrapper" aria-label="Сайдбар">
                
                <div class="discussion-sidebar">
                    <h2 class="discussion-sidebar__title">
                        Récents                    </h2>
                                            <div class="discussion-sidebar__item">
                            <a href="/fr/forum10451"
                               class="sidebar-question"
                               title="Méthode recommandée pour se connecter à MySQL depuis Go : drivers, pools de connexions et best practices">
                                <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">
                                        learn_code89                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Méthode recommandée pour se connecter à MySQL depuis Go : drivers, pools de connexions et best practices                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 réponses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/fr/forum10450"
                               class="sidebar-question"
                               title="Conversion de Decimal en Double en C# : comment éviter la perte de précision ?">
                                <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_junior16                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Conversion de Decimal en Double en C# : comment éviter la perte de précision ?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 réponses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/fr/forum10449"
                               class="sidebar-question"
                               title="Comment initialiser un HashSet avec un ensemble de valeurs lors de la création">
                                <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_learner74                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Comment initialiser un HashSet avec un ensemble de valeurs lors de la création                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 réponses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/fr/forum10448"
                               class="sidebar-question"
                               title="Comment ajouter des éléments à un dictionnaire (Dictionary) 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">
                                        debug_master28                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Comment ajouter des éléments à un dictionnaire (Dictionary) en Swift ?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 réponses</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/fr/forum10447"
                               class="sidebar-question"
                               title="Comment redéfinir un getter pour un champ d'une data class en Kotlin ?">
                                <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_me67                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Comment redéfinir un getter pour un champ d'une data class en Kotlin ?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 réponses</span>
                                </div>
                            </a>
                        </div>
                    </div>

</aside>
</div>

<section class="prelink-block" aria-label="Questions similaires">
  <h3 class="prelink-block__title">Questions similaires</h3>
  <div class="prelink-block__list">
                <a class="prelink-block__item" href="/fr/forum7577">
                <span class="prelink-block__name"> Insertion massive de données via JpaRepository dans Spring Boot et Kotlin</span>
      </a>
                <a class="prelink-block__item" href="/fr/forum8615">
                <span class="prelink-block__name"> Comment définir la durée de vie d'une session PHP à 30 minutes et la terminer automatiquement ?</span>
      </a>
                <a class="prelink-block__item" href="/fr/forum918">
                <span class="prelink-block__name"> Qu'est-ce que null/nil en C++ et comment travailler avec ?</span>
      </a>
                <a class="prelink-block__item" href="/fr/forum7716">
                <span class="prelink-block__name"> Comment créer un tableau vide en Kotlin ? Exemples avec intArrayOf, arrayOf et Array()</span>
      </a>
                <a class="prelink-block__item" href="/fr/forum9585">
                <span class="prelink-block__name"> Peut-on laisser un canal Go ouvert après la fin de l'exécution d'une goroutine ?</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>