jQuery: Универсальное добавление кнопки копирования для блоков code в html (JS, SQL, PHP)

В современной веб-разработке, особенно при создании технической документации, обучающих материалов или блога с примерами кода, функция быстрого копирования является критически важным элементом UX (User Experience). Вместо того чтобы заставлять пользователей вручную выделять содержимое тегов <pre> или <code>, мы можем автоматически добавить интуитивно понятную кнопку копирования.

В этой статье мы рассмотрим, как с помощью библиотеки jQuery реализовать универсальный скрипт, который добавит кнопку со значком (например, Font Awesome) ко всем элементам, имеющим классы для разных языков программирования: .language-js, .language-sql и .language-php.

Почему стоит использовать jQuery для этой задачи?

Хотя на чистом JavaScript это также реализуемо, jQuery значительно упрощает манипуляции с DOM и обработку событий. Наша цель — выбрать элементы сразу по нескольким классам и выполнить одинаковый набор действий для каждого из них, используя мощь селекторов jQuery.

Готовый jQuery-скрипт и стили для позиционирования кнопки

Представленный ниже скрипт находит все блоки с указанными классами. Вместо вставки кнопки перед блоком, мы будем вставлять ее внутрь <pre>. Для этого потребуется соответствующая структура HTML.

Пример HTML-структуры:

<pre>
    <code class="language-js">
        // Ваш JavaScript код здесь
        function greet(name) {
          console.log('Hello, ' + name + '!');
        }
        greet('World');
    </code>
</pre>

    

Теперь сам скрипт. Ищем code с нужными классами - их несколько .language-js, .language-sql, .language-php,.language-html - можно добавить свои

 $(document).ready(function() {
    // Добавляем кнопку копирования ко всем элементам с классом 'language-php'
    $('.language-js, .language-sql, .language-php,.language-html').each(function() {
        var $this = $(this);
        var copyButton = '<button class="copy-btn"><i class="fa fa-copy" aria-hidden="true"></i></button>';

        // Вставляем кнопку копирования перед содержимым кода
        $this.before(copyButton);

        // Добавляем обработчик события клика на кнопку копирования
        $this.prev('.copy-btn').on('click', function() {
            var codeToCopy = $this.text(); // Получаем текстовое содержимое элемента

            // Создаем временный элемент textarea для копирования
            var $tempTextArea = $('<textarea>');
            $tempTextArea.val(codeToCopy);
            $('body').append($tempTextArea);

            // Выделяем содержимое textarea
            $tempTextArea.select();

            try {
                // Пытаемся скопировать содержимое
                var successful = document.execCommand('copy');
                var msg = successful ? 'Успешно скопировано!' : 'Не удалось скопировать!';
                console.log(msg); // Можно вывести сообщение пользователю, например, с помощью toast
            } catch (err) {
                console.error('Ошибка при копировании: ', err);
            }

            // Удаляем временный элемент textarea
            $tempTextArea.remove();
        });
    });
});

Стилизация для лучшего вида

Для того чтобы кнопка копирования выглядела аккуратно и располагалась внутри блока кода, мы добавляем специальные CSS-правила. Важно, чтобы родительский элемент блока кода (в данном случае, мы предполагаем, что это сам элемент с классом .language-js, .language-sql или .language-php, или его предок, например, <pre>) имел свойство position: relative;.

CSS-правила для кнопок и блоков кода:

В секции <style> вашего HTML (или в отдельном CSS-файле) добавьте следующее:

<style>
 .copy-btn {
    background-color: #007bff; /* Синий фон */
    color: white; /* Белый текст */
    border: none;
    padding: 8px 12px; /* Увеличенный отступ */
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    display: inline-block;
    transition: background-color 0.3s ease; /* Плавный переход при наведении */
    position: absolute; /* Абсолютное позиционирование внутри родителя .language-xxx */
    top: 10px; /* Отступ сверху */
    right: 10px; /* Отступ справа */
    z-index: 10; /* Чтобы кнопка была поверх кода */
}

 .copy-btn:hover {
    background-color: #0056b3; /* Более темный синий при наведении */
}
code,
.language-js, .language-sql, .language-php {
    display: block; /* Чтобы занимали всю ширину */
    white-space: pre-wrap; /* Сохраняют пробелы и переносы строк */
    word-wrap: break-word; /* Переносят длинные слова */
    
  
    margin-bottom: 10px; /* Отступ снизу */
   line-height: 1.5;
 
}

/* Если вы хотите, чтобы код был в <pre> и кнопка находилась внутри */
pre{
    position: relative;
}

pre .copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10; /* Чтобы кнопка была поверх кода */
}
</style>

Как это работает: Пошаговый разбор

1. Селектор: Мы используем более точный селектор .language-js, .language-sql, .language-php,.language-html. Это означает: "выбери элементы code с соответствующим классом, которые являются прямыми потомками элемента pre".
2. Вставка кнопки: $parentPre.prepend(copyButton) вставляет созданную кнопку в начало содержимого найденного <code>.
3. Привязка обработчика: Мы находим кнопку уже внутри <pre> с помощью $parentPre.find('.copy-btn') и привязываем к ней обработчик клика.
4. Копирование: извлекет текст из $codeToCopy.

Заключение

Внедрение этой функциональности с красивым, позиционированным элементом управления значительно повышает удобство использования вашего контента. Используя jQuery и правильные CSS-правила, вы добиваетесь элегантного и кроссбраузерного решения для добавления кнопок копирования к коду JavaScript, SQL и PHP.