Wie kopiere ich Text mit JavaScript in die Zwischenablage?

Question

learn_code27 · 09.05.2026

Wie kopiere ich Text mit JavaScript in die Zwischenablage?

Hallo zusammen! Ich bin ein angehender Frontend-Entwickler und bin auf eine Aufgabe gestoßen, die einfach erscheint, mir aber Schwierigkeiten bereitet. Ich muss einen "Kopieren"-Button auf der Seite implementieren, damit der Benutzer mit einem Klick Text (z. B. einen Link, Code oder ein generiertes Passwort) in die Zwischenablage kopieren kann.\n\nIch habe versucht, `document.execCommand('copy')` zu verwenden, stoße aber darauf, dass dies in einigen Browsern instabil funktioniert und in der Konsole Warnungen erscheinen, dass die Methode veraltet ist. Außerdem verstehe ich nicht vollständig, wie ich den Text vor dem Kopieren richtig auswählen kann, wenn er sich nicht in einem `` oder `

` befindet, sondern beispielsweise in einem normalen `<div>` oder `<p>`.\n\nHier ist ein Beispiel meines Codes, der nicht richtig funktioniert:\n\n```javascript\nfunction copyText() {\n  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 Antworten                            </span>
                        </div>
                    </div>
                </div>

<div class="answers" id="answers-3120">
                                            <p>Noch keine Antworten.</p>
                    
                    
                                            <p style="color:#748791;padding:10px 0">
                            <a href="/login" style="color:#e92323">
                                Anmelden                            </a>
                             um eine Antwort zu hinterlassen                        </p>
                    
                    
                    <section class="books-recomends recomends-block"
                             aria-label="Blogs">
                        <h2 class="recomends-title">
                            Blogs                        </h2>
                        <div class="blogs-container">
                                                            <a href="/de/post1009"
                                   title="Wie man in 30 Minuten eine REST API in C# schreibt: Schritt-für-Schritt-Anleitung">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80"
                                                 alt="Wie man in 30 Minuten eine REST API in C# schreibt: Schritt-für-Schritt-Anleitung"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Wie man in 30 Minuten eine REST API in C# schreibt: Schritt-für-Schritt-Anleitung</h3>
                                    </div>
                                </a>
                                                            <a href="/de/post2493"
                                   title="Aufgabenwarteschlangen in Rust: Ein praktischer Leitfaden mit Codebeispielen">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=800&q=80"
                                                 alt="Aufgabenwarteschlangen in Rust: Ein praktischer Leitfaden mit Codebeispielen"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Aufgabenwarteschlangen in Rust: Ein praktischer Leitfaden mit Codebeispielen</h3>
                                    </div>
                                </a>
                                                            <a href="/de/post3211"
                                   title="Monorepository mit PHP: Code-Organisation in der Praxis">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1573496528681-9b0f4fb0c660?w=800&q=80"
                                                 alt="Monorepository mit PHP: Code-Organisation in der Praxis"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Monorepository mit PHP: Code-Organisation in der Praxis</h3>
                                    </div>
                                </a>
                                                            <a href="/de/post3866"
                                   title="So meistern Sie das TypeScript-Vorstellungsgespräch: Top-Fragen für Fortgeschrittene">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80"
                                                 alt="So meistern Sie das TypeScript-Vorstellungsgespräch: Top-Fragen für Fortgeschrittene"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">So meistern Sie das TypeScript-Vorstellungsgespräch: Top-Fragen für Fortgeschrittene</h3>
                                    </div>
                                </a>
                                                            <a href="/de/post4236"
                                   title="Schreiben der Dokumentation für ein Kotlin-Projekt: von A bis Z">
                                    <div class="blog-item">
                                        <div class="blog-img-wrapper">
                                            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80"
                                                 alt="Schreiben der Dokumentation für ein Kotlin-Projekt: von A bis Z"
                                                 class="blog-img" loading="lazy" width="200" height="150">
                                        </div>
                                        <h3 class="blog-name">Schreiben der Dokumentation für ein Kotlin-Projekt: von A bis Z</h3>
                                    </div>
                                </a>
                                                    </div>
                    </section>
                </div>
            </article>

<aside class="discussion-sidebar-wrapper" aria-label="Сайдбар">
                
                <div class="discussion-sidebar">
                    <h2 class="discussion-sidebar__title">
                        Neueste                    </h2>
                                            <div class="discussion-sidebar__item">
                            <a href="/de/forum9493"
                               class="sidebar-question"
                               title="TS-Fehler: flatMap, flat, flatten existieren nicht für den Typ any[] in Angular">
                                <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_code20                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    TS-Fehler: flatMap, flat, flatten existieren nicht für den Typ any[] in Angular                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 Antworten</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/de/forum9492"
                               class="sidebar-question"
                               title="Verständnis von esModuleInterop in tsconfig.json: Wie man CommonJS-Module in TypeScript importiert">
                                <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_master87                                    </strong>
                                </div>
                                <strong class="sidebar-question__title">
                                    Verständnis von esModuleInterop in tsconfig.json: Wie man CommonJS-Module in TypeScript importiert                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 Antworten</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/de/forum9491"
                               class="sidebar-question"
                               title="Python-Code für Eigenbewegung">
                                <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-Code für Eigenbewegung                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 Antworten</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/de/forum9490"
                               class="sidebar-question"
                               title="Wie lese ich eine Datei?">
                                <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">
                                    Wie lese ich eine Datei?                                </strong>
                                <div class="sidebar-question__footer">
                                    <span>0 Antworten</span>
                                </div>
                            </a>
                        </div>
                                            <div class="discussion-sidebar__item">
                            <a href="/de/forum9489"
                               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 Antworten</span>
                                </div>
                            </a>
                        </div>
                    </div>

</aside>
</div>

<section class="prelink-block" aria-label="Ähnliche Fragen">
  <h3 class="prelink-block__title">Ähnliche Fragen</h3>
  <div class="prelink-block__list">
                <a class="prelink-block__item" href="/de/forum8131">
                <span class="prelink-block__name"> Der dynamische Pfad für Upload_to im Django-Modell (Models.FileField)</span>
      </a>
                <a class="prelink-block__item" href="/de/forum9162">
                <span class="prelink-block__name"> Wie erhalte ich ein Class-Objekt für den Typparameter T in Java?</span>
      </a>
                <a class="prelink-block__item" href="/de/forum755">
                <span class="prelink-block__name"> Count-Methode in Python 3</span>
      </a>
                <a class="prelink-block__item" href="/de/forum8752">
                <span class="prelink-block__name"> So erhalten Sie eine Liste von Dateien und Ordnern in einem Verzeichnis in Go: vollständige Anleitung</span>
      </a>
                <a class="prelink-block__item" href="/de/forum9154">
                <span class="prelink-block__name"> Wie entferne ich alle Zeichen aus einem String außer Buchstaben, Ziffern und Bindestrich in C#?</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>