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

07 Jan 2026 • 7 min read • Frontend • Обновлено 07 Jan 2026

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

К чему это и что в статье

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

Important: все примеры кода — готовые фрагменты, их можно вставлять в проект без правок, если структура файлов совпадает с описанной.

Монитор с кодом JavaScript

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

Если вы часто работаете с набросками UI, вероятно, уже встречали lorem ipsum и знаете, что он мгновенно сигнализирует: это временный текст.

Почему lorem ipsum так популярен

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

Плюсы использования lorem ipsum:

Быстрая генерация заполнителя для макета.
Универсальность: подходит для разных языков верстки.
Визуальная нейтральность: не даёт читателю концентрироваться на тексте.

Когда лучше не использовать lorem ipsum — см. раздел «Когда это не сработает».

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

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

Если хотите посмотреть живой пример — используйте демо-версию репозитория (ссылка в исходном репо).

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

npm create vite

Или:

yarn create vite

Шаблон создаст пустой Vite‑проект. Введите имя проекта, выберите фреймворк “Vanilla” и вариант “Vanilla”. Перейдите в папку проекта:

cd

Установите зависимости:

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

Примечание: в разметке управления используются элементы input type=range и кнопки. При локализации UI между метками и кодом — переводите только текст интерфейса в шаблоне приложения, но в примере index.html мы оставили оригинальные англоязычные атрибуты для простоты копирования.

В main.js импортируйте style.css:

import './style.css'

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

Скопируйте длинную строку lorem из lorem.js в локальный файл lorem.js. В main.js импортируйте lorem и подготовьте набор переменных:

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");

Коротко: регулярное выражение убирает пунктуацию, затем текст разбивается на слова. Это облегчает сбор случайных слов для параграфов.

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

Чтобы текст выглядел более естественно, нужно вставлять пунктуацию и заглавные буквы в нужных местах.

Сначала функция генерации случайной пунктуации:

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

Далее — функция генерации одного параграфа. По умолчанию параметр count = 100:

function generateParagraph(count = 100) {  
}

Внутри собираем массив слов и случайно берём слова из глобального 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 + ".");

Через каждые ~10 слов вставляем случайную пунктуацию и, если она не запятая, делаем следующую букву заглавной:

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(" ");

Структура текста: несколько параграфов

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

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

Если вывести structure.join(“”) в консоли, увидите готовую строку с отступами.

Скриншот структуры (вывод в консоли)

Функция, которая автоматически строит структуру и вызывает 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("");  
}

Слушатели событий для контролов

Обновляем счётчики при движении слайдеров и подписываемся на клики кнопок.

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();  
})

Обновляем UI и копирование

Функция getControlValues возвращает текущие настройки:

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

Функция updateUI собирает текст и выводит в DOM:

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 не годится.
Для юзабилити‑тестов с пониманием контента используйте реальные тексты или «realistic faketext» с ключевыми словами, а не бессмысленный lorem.
Для локализованных макетов используйте реальные строки на целевом языке, чтобы проверить переносы и длину.

Альтернативные подходы

Генерация на стороне сервера: для более сложных правил формирования предложений собирайте текст на сервере и отдавайте API (Node, Python, Go).
Использование библиотек: готовые npm‑пакеты (например, lorem-ipsum) дают больше контроля над синтаксисом и форматированием.
Маркдаун-генерация: если нужен тестовый контент для блогов, генерируйте не только текст, но и заголовки, изображения и метаданные.

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

Мини‑методология: быстрый план работы (4 шага)

Установите Vite и подготовьте структуру файлов.
Подключите файл lorem.js с большим текстом-источником.
Реализуйте функции генерации слова/параграфа/структуры.
Добавьте UI: слайдеры, кнопки, копирование; покройте тестами.

Эта последовательность даёт минимальную гарантию работоспособности и простоту отладки.

Чек-лист по ролям

Разработчик:

Инициализировал Vite и установил зависимости.
Импортировал lorem.js и подключил style.css.
Реализовал функции generateRandomPunctuation, generateParagraph, generateStructure.
Добавил event listeners и implement copyText.
Написал unit‑тесты для генерации параграфа.

Дизайнер / Продукт:

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

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

Генератор создаёт N параграфов длиной M слов по настройкам UI.
Текст содержит пунктуацию и заглавные буквы в подходящих местах.
Кнопка “Copy to Clipboard” записывает текст в системный буфер обмена.
Приложение работает в современных браузерах без ошибок в консоли.

Тесты и приёмочные сценарии

Тест 1: задать 1 параграф по 10 слов — убедиться, что вывод корректен и завершается точкой.
Тест 2: задать 3 параграфа — убедиться, что между параграфами есть двойной перевод строки.
Тест 3: нажать «Copy to Clipboard» и вставить содержимое в текстовый редактор — сравнить с выводом.
Тест 4: ползунок слов в крайних значениях (min/max) — приложение должно не падать.

Критерии приёмки — тесты должны пройти вручную или в автоматизированном окружении CI.

Совместимость и миграция

Vite поддерживается в Node.js LTS; проверьте версию Node, рекомендуемые LTS‑релизы.
Для миграции с других сборщиков (Webpack/Rollup) — перенесите только точечные модули и сохраните структуру public/ и src/.

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

lorem.js содержит только статический текст и не передаёт персональные данные.
При добавлении возможности сохранять тексты на сервер — учитывайте политику хранения и шифрование, если тексты могут содержать чувствительную информацию.
Clipboard API требует HTTPS в большинстве браузеров — учитывайте при развертывании.

Практическая заметка по локали

Если вы собираетесь адаптировать генератор для других языков, используйте словарь и правила пунктуации для целевого языка. Правила капитализации и размещения знаков препинания различаются.

Факт-бокс

Источник текста: lorem.js — статическая строка-источник.
Контролы UI: слайдеры для слов и параграфов, кнопка копирования.
Совместимость: современные браузеры, HTTPS для Clipboard API.

Цитата эксперта

“Показывайте макет с тем текстом, который проверяет именно те гипотезы, которые вам нужны: визуальную плотность, переносы или семантику — lorem подходит не всегда.”

Социальные превью

OG title: Генератор Lorem Ipsum на Vite и JS

OG description: Быстрый генератор filler‑текста с Vite и Vanilla JS — настройка, код и чек-листы для разработки.

Краткое объявление (100–200 слов)

Создал простой генератор Lorem Ipsum на Vite и чистом JavaScript: слайдеры для слов и параграфов, случайная пунктуация, копирование в буфер обмена. В статье — готовые фрагменты кода для main.js и index.html, рекомендации по тестированию, чек‑листы для разработчика и дизайнера, а также заметки по безопасности и локализации. Идеально для быстрых прототипов интерфейса и внутренних инструментов команды.

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

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