Генератор Lorem Ipsum на Vite и JavaScript

23 Dec 2025 • 4 min read • Frontend • Обновлено 23 Dec 2025

Монитор с отображённым JavaScript-кодом

Lorem ipsum — это текст-заполнитель, который дизайнеры и разработчики используют по всему миру. Если вы часто взаимодействуете с UI‑прототипами, вы, вероятно, уже встречали его.

В этой статье вы научитесь создавать гибкий генератор Lorem Ipsum с Vite и JavaScript. По мере выполнения вы прокачаете практические навыки фронтенд-разработки и получите полезный инструмент для всех ваших макетов и прототипов.

Зачем вообще использовать Lorem Ipsum?

Lorem ipsum позволяет сосредоточиться на визуальной форме документа или макета, не отвлекая внимание читателя на смысл текста. Вместо поиска реальных фрагментов текста из разных источников вы можете быстро подставить знакомый заполнитель — это экономит время и помогает оценить распределение текста, переносы строк и визуальный ритм.

Lorem ipsum настолько узнаваем, что большинству пользователей не нужно объяснять: они сразу поймут, что это заглушка.

Что вы получите в результате

Рабочий генератор Lorem Ipsum на Vite и Vanilla JS.
UI с контролами для количества слов на абзац и числа абзацев.
Кнопки генерации и копирования в буфер обмена.
Простая логика добавления пунктуации и капитализации.
Рекомендации по тестированию, альтернативные подходы и чек‑листы.

Настройка проекта и dev‑сервера

Код этого проекта хранится в публичном репозитории на GitHub и распространяется под MIT‑лицензией. Скопируйте содержимое файлов style.css и lorem.js в ваши локальные файлы.

Если хотите посмотреть живой пример, проверьте онлайн‑демо в репозитории.

Мы будем использовать Vite. Убедитесь, что на машине установлены Node.js и менеджер пакетов (NPM или Yarn). Откройте терминал и выполните одну из команд:

        `npm create vite`

Или:

        `yarn create vite  
`

Далее укажите имя проекта и выберите фреймворк “Vanilla” и вариант “Vanilla”. Перейдите в папку проекта и установите зависимости:

        `npm i`

Или:

        `yarn`

После установки откройте проект в редакторе и приведите структуру к виду, похожему на этот скриншот.

Скриншот структуры проекта

Очистите содержимое index.html и замените его следующим шаблоном:

        `  
  
    
      
      
      
    Lorem Ipsum Generator  
    
    
    Lorem Ipsum Generator  
      
        
          
            
            Words per paragraph  
              
                
              25

  
                        
            Paragraph count  
              
                
              3

  
          Generate  
          
        Copy to Clipboard  
          
          Use the sliders to set the parameters, then hit the "Generate" button.  
            
          You can copy the text by hitting the "Copy to Clipboard" button

Этот HTML описывает интерфейс: слева — контролы, справа — вывод. Откройте main.js, очистите файл и импортируйте стиль:

        `import './style.css'  
`

Импорт lorem.js и глобальные переменные

Скопируйте lorem.js из репозитория — он экспортирует длинную строку Lorem Ipsum. Затем в main.js импортируйте её и задайте переменные:

        `import { lorem } from './lorem';  
  
let text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").split(' ');  
let lastChar;  
let wordCountControl = document.querySelector("#w-count");  
let paragraphCountControl = document.querySelector("#p-count");  
let wordCountLabel = document.querySelector("#w-count-label");  
let paragraphCountLabel = document.querySelector("#p-count-label");  
let wordCount = wordCountControl.value;  
let paragraphCount = paragraphCountControl.value;  
let copy = document.querySelector(".copy");  
`

Этот код убирает пунктуацию из строки lorem и разбивает её на массив слов — так проще выбирать случайные слова.

Функции генерации

Чтобы текст выглядел естественно, нам нужна пунктуация и капитализация. Начнём с генерации случайного знака препинания:

        `function generateRandomPunctuation() {  
    let characters = [",", "!", ".", "?"];  
    let character = characters[Math.floor(Math.random() * characters.length)];  
    lastChar = character;  
    return character;  
}  
`

Далее функция генерации абзаца с параметром count по умолчанию 100:

        `function generateParagraph(count = 100) {  
}  
`

Внутри создаётся массив paragraph и заполняется случайными словами из глобального text:

        `let paragraph = [];  
  
for (let i = 1; i <= count; i++) {  
    paragraph.push(text[Math.floor(Math.random() * text.length)].toLowerCase());  
}  
`

Затем капитализируем первое слово и добавляем точку в конец абзаца:

        `let fl=paragraph[0];  
paragraph[0] = fl.replace(fl[0], fl[0].toUpperCase());  
`

        `let lwPos = paragraph.length - 1;  
let lWord = paragraph[lwPos];  
paragraph[lwPos] = lWord.replace(lWord, lWord + ".");  
`

Добавим случайные знаки препинания внутри абзаца и обеспечим капитализацию следующего слова при необходимости:

        `paragraph.forEach((word, index) => {  
    if (index > 0 && index % 10 === 0) {  
        let randomNum = Math.floor(Math.random() * 4);  
        let pos = index + randomNum;  
        let randWord = paragraph[pos];  
        paragraph[pos] = randWord.replace(randWord, randWord + generateRandomPunctuation());  
        let nWord=paragraph[pos + 1];  
  
        if (lastChar !== ",") {  
            paragraph[pos + 1] = nWord.replace(nWord[0], nWord[0].toUpperCase());  
        }  
    }  
})  
`

Наконец возвращаем абзац как строку:

        `return paragraph.join(" ");`

Чтобы сформировать несколько абзацев, используем структуру — массив, где между абзацами вставлены переносы:

        `structure = ["First paragraph.", "\n \n", "Second paragraph.", "\n \n", "Third paragraph"]  
`

И функция, которая собирает структуру, вызывая generateParagraph:

        `function generateStructure(wordCount, paragraph = 1) {  
    let structure = [];  
  
    for (let i = 0; i < paragraph * 2; i++) {  
        if (i % 2 === 0) structure[i] = generateParagraph(wordCount);  
        else if (i < (paragraph * 2) - 1) structure[i] = "\n \n";  
    }  
  
    return structure.join("");  
}  
`

Скриншот итоговой структуры

Обработка событий UI

Привяжем контролы к переменным и слушателям событий:

        `wordCountControl.addEventListener("input", (e) => {  
    wordCount = e.target.value;  
    wordCountLabel.textContent= e.target.value;  
})  
`

        `paragraphCountControl.addEventListener("input", (e) => {  
    paragraphCount= e.target.value;  
    paragraphCountLabel.textContent = e.target.value;  
})  
`

Кнопка копирования:

        `copy.addEventListener("click", ()=>copyText());  
`

Слушатель на форму:

        `document.querySelector("form").addEventListener('submit', (e) => {  
    e.preventDefault();  
    updateUI();  
})  
`

Обновление интерфейса и копирование

Функция для считывания значений контролов:

        `function getControlValues() {  
    return { wordCount, paragraphCount };  
}  
`

Функция обновления UI:

        `function updateUI() {  
    let output = generateStructure(getControlValues().wordCount, getControlValues().paragraphCount)  
    document.querySelector(".output").innerText = output;  
}  
`

Копирование в буфер обмена:

        `async function copyText() {  
    let text = document.querySelector(".output").innerText;  
    try {  
      await navigator.clipboard.writeText(text);  
      alert('Copied to clipboard');  
    } catch (err) {  
      alert('Failed to copy: ', err);  
    }  
  }  
`

Инициализация начального состояния:

        `updateUI();  
`

Поздравляем — вы собрали генератор Lorem Ipsum на JavaScript и Vite!

Скриншот готового проекта

Улучшения и альтернативные подходы

Ниже — набор практических вариантов развития проекта. Выберите те, что подходят под ваши требования.

Быстрые улучшения

Сохранение настроек (wordCount, paragraphCount) в localStorage, чтобы параметры сохранялись между перезагрузками.
Экспорт в текстовый файл (.txt) помимо копирования в буфер.
Добавление опции «ключевые слова» — вставлять заданные слова в случайные позиции.

Альтернативы генерации

Локальная библиотека: используйте npm‑пакеты типа lorem-ipsum или faker для более «естественного» текста — они предлагают гибкие API и параметризацию.
Серверная генерация: если нужно генерировать большой объём текста или логирование, производите генерацию на сервере и отдавайте результат как JSON или текст.
Генерация на основе шаблонов: храните несколько шаблонов предложений и собирайте абзацы по шаблонам с подстановкой слов.

Когда этот подход не подходит

Нужен строго контролируемый или семантический текст (например, юридические документы). Lorem Ipsum — только для визуального макета.
Необходима международная локализация с учётом правил пунктуации и капитализации других языков.
Требуется прогнозируемая повторяемость результатов — текущая реализация использует случайность без семени (seed).

Тестирование и критерии приёмки

Критерии приёмки

UI корректно рендерит указанное число абзацев и слов.
Первое слово каждого абзаца имеет заглавную букву.
Каждый абзац заканчивается точкой.
Внутри абзацев появляются случайные знаки препинания, а следующее слово после точки/вопросительного/восклицательного знака — с заглавной буквы.
Кнопка «Copy to Clipboard» записывает текст в системный буфер обмена.

Тестовые случаи

Генерация с минимальными и максимальными значениями контролов.
Копирование при пустом выводе (output) — ожидаем обработку ошибки.
Быстрое многократное нажатие кнопки «Generate» — проверка на утечки памяти и корректное обновление UI.
Тест в браузерах с ограниченным доступом к Clipboard API — обработка ошибок должна быть дружелюбной.

Чек‑лист для команд

Для разработчиков

Проверить обработку ошибок при записи в clipboard.
Добавить unit‑тесты на функции generateParagraph и generateStructure (с предсказуемым семенем).
Убедиться, что регулярное выражение для удаления пунктуации не ломает слова с апострофами (если добавляете другие языки).

Для дизайнеров

Оценить визуальный ритм текста при реальных макетах.
Проверить переносы строк и контроль widows/orphans в типографике.
Настроить минимальные и максимальные значения ползунков под проектные требования.

Безопасность, доступ и приватность

Clipboard API запрашивает разрешение у браузера; обработайте отказ пользователя понятным сообщением.
Генерация и копирование текста локальные — проект не отправляет данные на сервер по умолчанию.
Если добавляете хранение в localStorage, не сохраняйте в нём чувствительные данные.

Советы по локализации и совместимости

Для мультиязычных проектов замените исходный lorem на текст‑заглушку для целевого языка и скорректируйте правила капитализации и пунктуации.
Код работает в современных браузерах; при необходимости поддержать старые браузеры — транспилируйте через Babel и используйте полифиллы для Clipboard API.
Vite совместим с npm и Yarn. При миграции на pnpm учтите особенности lock‑файлов и node_modules.

Шпаргалка и сниппеты

Минимальный паттерн генерации абзаца (альтернатива с простым семенем):

function pickRandom(arr, seed) {
  const idx = Math.floor((Math.abs(Math.sin(seed)) * 10000) % arr.length);
  return arr[idx];
}

function generateParagraphWithSeed(textArr, count = 100, seed = 1) {
  const paragraph = [];
  for (let i = 0; i < count; i++) {
    paragraph.push(pickRandom(textArr, seed + i).toLowerCase());
  }
  // кап to start and add dot at end — как раньше
  paragraph[0] = paragraph[0].replace(paragraph[0][0], paragraph[0][0].toUpperCase());
  paragraph[paragraph.length - 1] += '.';
  return paragraph.join(' ');
}

Этот фрагмент показывает, как получить детерминированную последовательность при заданном seed.

Роль‑ориентированные задачи и план внедрения

Product Owner

Уточнить диапазоны значений контролов и требуемые текстовые шаблоны.
Решить, нужна ли интеграция с редакторами документации.

Frontend Developer

Реализовать unit‑тесты и полифиллы для поддержки браузеров.
Добавить локализацию UI (перевести метки и подсказки).

Designer

Проверить визуальную компоновку с реальными текcтами и символами.
Настроить типографику для комфортного чтения lorem‑заполнителей.

DevOps

Подготовить CI для сборки проекта через Vite и тестов.
Настроить деплой демо‑страницы (Netlify, Vercel или GitHub Pages).

Примеры использования и ограничения

Прототипирование интерфейсов и шаблонов печатной продукции.
Проверка адаптивности макета при различных объёмах текста.
Не используйте Lorem Ipsum там, где важна семантика текста.

Краткое резюме

Генератор Lorem Ipsum на Vite — полезный инструмент для прототипирования.
Базовый код прост: импорт lorem.js, выбор случайных слов, пунктуация и капитализация.
Расширяйте функционал через локальное хранение, экспорт, детерминированность и библиотечные решения.

Вперед — интегрируйте генератор в ваши рабочие инструменты и адаптируйте поведение под реальные сценарии использования.

Поделиться: X/Twitter Facebook LinkedIn Telegram