Cum să construiți un generator de text Lorem Ipsum cu JavaScript și Vite

Lorem ipsum este text pe care dezvoltatorii și designerii din întreaga lume îl folosesc ca substituent. Dacă interacționați cu o mulțime de prototipuri de UI, probabil ați mai întâlnit-o înainte.

Aflați cum să construiți un generator Lorem ipsum flexibil cu Vite și JavaScript și vă veți dezvolta abilitățile de dezvoltare cu un rezultat util.

De ce este Lorem Ipsum utilizat atât de larg?

S-ar putea să vă întrebați de ce atât de mulți dezvoltatori și designeri aleg lorem ipsum când ar putea doar să copieze o pagină dintr-o carte de domeniu public sau similar. Motivul principal este că permite utilizatorului sau spectatorului să-și facă o idee despre forma vizuală a unui document sau prototip, fără a concentra prea mult asupra textului substituent.

Imaginați-vă că proiectați un ziar. În loc să treci prin necazul copierii textului din diferite surse pentru a face designul ca cât mai realist posibil, ați putea doar să copiați textul substituent standard lorem ipsum și să îl utilizați in schimb.

Lorem ipsum este atât de larg recunoscut încât nici măcar nu trebuie să specificați că este un text substituent - practic toți cei care îl întâlnesc vor recunoaște imediat că textul este de umplere.

Configurarea serverului de proiect și dezvoltare

Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT. Copiați conținutul stil.css si lorem.js fișiere și lipiți-le în propriile copii locale ale acestor fișiere.

Dacă doriți să aruncați o privire la o versiune live a acestui proiect, puteți verifica aceasta demonstrație.

Veți folosi Vite build instrument a pune lucrurile la punct. Asigurați-vă că aveți Node.js și Node Package Manager (NPM) sau Yarn instalat pe mașina dvs., apoi deschideți terminalul și rulați:

npm create vite

Sau:

yarn create vite

Acest lucru ar trebui să schele un proiect Vite gol. Introduceți numele proiectului, setați cadrul la „Vanilla” și, varianta la „Vanilla”. După ce ați făcut asta, navigați la directorul de proiect cu CD comandă, apoi rulați:

npm i

Sau:

fire

După instalarea tuturor dependențelor, deschideți proiectul în editorul de text dorit, apoi modificați structura proiectului pentru a arăta cam așa:

Acum, ștergeți conținutul index.html fișier și înlocuiți-l cu următoarele:

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8” />
<legăturărel="icoana"tip=„imagine/svg+xml”href=„/vite.svg” />
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0” />
<titlu>Generator Lorem Ipsumtitlu>
cap>
<corp>
<h1>Generator Lorem Ipsumh1>
<divid=„aplicație”>
<divclasă="controale">
<formă>
<divclasă="Control">
<etichetapentru=„număr de w”>Cuvinte pe paragrafeticheta>
<div>
<intraretip="gamă"id=„număr de w”min="10"max="100"valoare="25"Etapa="10">
<spanid=„w-count-label”>25span>
div>
div>
<divclasă="Control">
<etichetapentru="p-count">Numărul de paragrafeeticheta>
<div>
<intraretip="gamă"id="p-count"min="1"max="20"Etapa="1"valoare="3">
<spanid=„p-count-label”>3span>
div>
div>
<butontip="Trimite">Generabuton>
formă>
<butonclasă="copie">Copiați în clipboardbuton>
<divclasă="informatii">
 Folosiți glisoarele pentru a seta parametrii, apoi apăsați butonul „Generare”.

 Puteți copia textul apăsând butonul „Copiere în Clipboard”.
div>
div>
<divclasă="ieșire">div>
div>
<scenariutip="modul"src=„/main.js”>scenariu>
corp>
html>

Acest marcaj definește pur și simplu interfața cu utilizatorul. Partea stângă a ecranului afișează comenzile, în timp ce partea dreaptă arată rezultatul. Apoi, deschideți main.js fișier, ștergeți conținutul acestuia și adăugați o singură linie de importat stil.css:

import„./style.css”

Importarea fișierului Lorem și definirea variabilelor globale

Deschideți depozitul GitHub al acestui proiect, copiați conținutul fișierului lorem.js fișier și inserați-le în copia locală a lorem.js. lorem.js pur și simplu exportă un șir foarte lung de text Lorem Ipsum pe care îl pot folosi alte fișiere JavaScript.

În main.js fișier, importați lorem sfoară de la lorem.js fișier și definiți variabilele necesare:

import { lorem } din'./lorem';
lăsa text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").Despică(' ');
lăsa lastChar;
lăsa wordCountControl = document.querySelector(„#w-count”);
lăsa paragraphCountControl = document.querySelector(„#p-count”);
lăsa wordCountLabel = document.querySelector(„#w-count-label”);
lăsa paragraphCountLabel = document.querySelector(„#p-count-label”);
lăsa wordCount = wordCountControl.value;
lăsa paragraphCount = paragraphCountControl.value;
lăsa copie = document.querySelector(".copie");

Acest cod folosește o expresie regulată pentru a elimina orice semn de punctuație din lorem text. The text variabila leagă această versiune modificată a lorem text. Acest lucru ar trebui să faciliteze generarea de cuvinte și paragrafe.

Crearea funcțiilor generatorului

Pentru ca orice propoziție sau paragraf generate aleatoriu să pară „real”, trebuie să existe semne de punctuație. După definirea variabilelor globale, creați o funcție numită generateRandomPunctuation() și în acea funcție creați o matrice numită personaje si populeaza-l.

funcţiegenerateRandomPunctuation() {
lăsa caractere = [",", "!", ".", "?"];
lăsa caracter = caractere[Matematică.podea(Matematică.random() * caractere.lungime)];
 lastChar = caracter;
întoarcere caracter;
}

Blocul de cod de mai sus definește o matrice, personaje, care conține semne de punctuație diferite. Acesta definește o altă variabilă, caracter, pe care îl setează la un element aleatoriu din personaje matrice. variabila globala, ultimulChar, stochează aceeași valoare pe care apoi o returnează funcția.

Apoi, creați un generateParagraph() functioneaza cu a numara parametru care are o valoare implicită de 100.

funcţiegenerateParagraph(numără = 100) {
}

În această funcție, declarați a paragraf matrice și obține cuvinte aleatorii din global text matrice, apoi împingeți-l în paragraf.

lăsa paragraf = [];
pentru (lăsa i = 1; i <= număr; i++) {
 paragraf.push (text[Matematică.podea(Matematică.random() * text.length)].toLowerCase());
}

Apoi, adăugați codul pentru a scrie cu majuscule prima literă din primul cuvânt al fiecărui paragraf:

lăsa fl=paragraf[0];
paragraf[0] = fl.inlocuire (fl[0], fl[0].toUpperCase());

Fiecare paragraf se termină cu un semn de punctuație (de obicei un punct), așa că adăugați codul care adaugă un punct la sfârșitul fiecărui paragraf.

lăsa lwPos = paragraph.length - 1;
lăsa lWord = paragraf[lwPos];
paragraf[lwPos] = lWord.replace (lWord, lWord + ".");

Apoi, implementați funcționalitatea pentru a adăuga o punctuație generată aleatoriu unui element aleatoriu din paragraf matrice.

paragraph.forEach((cuvânt, index) => {
dacă (index > 0 && index % 100) {
lăsa randomNum = Matematică.podea(Matematică.Aleatoriu() * 4);
lăsa pos = index + randomNum;
lăsa randWord = paragraf[poz];
 paragraf[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
lăsa nCuvânt=paragraf[poz + 1];
dacă (lastChar !== ",") {
 paragraf[poz + 1] = nWord.replace (nWord[0], nCuvânt[0].toUpperCase());
 }
 }
})

Acest bloc de cod generează un caracter de punctuație aleatoriu și îl adaugă la sfârșitul unui element aleatoriu din paragraf matrice. După adăugarea semnelor de punctuație, se scrie prima literă a elementului următor dacă semnul de punctuație nu este virgulă.

În cele din urmă, returnați paragraf matrice formatată ca șir:

întoarcere paragraf.join(" ");

Textul lorem ipsum ar trebui să aibă o „structură” bazată pe numărul de paragrafe specificat de utilizator. Puteți folosi o matrice pentru a defini această „structură”. De exemplu, dacă utilizatorul dorește un text lorem ipsum cu trei paragrafe, matricea „structură” ar trebui să arate astfel:

structura = ["Primul paragraf.", "\n \n", „Al doilea paragraf”., "\n \n", „Al treilea paragraf”]

În blocul de cod de mai sus, fiecare „\n \n” reprezintă distanța dintre fiecare paragraf. Dacă vă logați structure.join("") în consola browserului, ar trebui să vedeți următoarele:

Creați o funcție care generează automat această structură și apelează generateParagraph funcţie:

funcţiegenerateStructure(wordCount, paragraf = 1) {
lăsa structura = [];
pentru (lăsa i = 0; i < paragraf * 2; i++) {
dacă (i % 20) structura[i] = generateParagraph (număr de cuvinte);
altfeldacă (i < (paragraf * 2) - 1) structura[i] = "\n \n";
 }
întoarcere structura.join("");
}

Adăugarea de ascultători de evenimente la comenzi

Adăugați un ascultător de eveniment „de intrare” la wordCountControl element de intrare și în funcția de apel invers, setați număr de cuvinte la valoarea de intrare. Apoi actualizați eticheta.

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

Apoi, adăugați un ascultător de evenimente „de intrare” la paragraphCountControl element de intrare și în funcția de apel invers setați paragraphCount la valoarea de intrare și actualizați eticheta.

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

Adăugați un ascultător de eveniment „clic” la copie butonul care apelează înapoi la copiază textul() când evenimentul se declanșează.

copy.addEventListener("clic", () => copieText());

În cele din urmă, adăugați un ascultător de eveniment „trimitere” la formă element HTML și apelați updateUI funcția din funcția de apel invers.

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

Finalizarea și actualizarea interfeței de utilizare

Creați o funcție getControlValues care revine număr de cuvinte și paragraphCount ca obiect.

funcţiegetControlValues() {
întoarcere { wordCount, paragraphCount };
}

Apoi creați updateUI() funcție care redă textul generat pe ecran pentru utilizator:

funcţieupdateUI() {
lăsa output = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
document.querySelector(".ieșire").innerText = ieșire;
}

Aproape gata. Creați copiază textul() funcție care scrie textul în clipboard ori de câte ori utilizatorul face clic pe butonul „Copy to Clipboard”.

asincronfuncţiecopiază textul() {
lăsa text = document.querySelector(".ieșire").innerText;
încerca {
așteaptă navigator.clipboard.writeText (text);
 alerta(„Copiat în clipboard”);
 } captură (eroare) {
 alerta(„Copiarea eșuată:”, greș);
 }
 }

Apoi sunați la updateUI() funcţie:

updateUI();

Felicitări! Ați construit un generator de text lorem ipsum cu JavaScript și Vite.

Îmbunătățiți dezvoltarea JavaScript cu Vite

Vite este un instrument popular de front-end care facilitează configurarea cadrului de front-end. Acceptă o varietate de cadre precum React, Svelte, SolidJS și chiar JavaScript simplu. Mulți dezvoltatori JavaScript folosesc Vite deoarece este foarte ușor de configurat și foarte rapid.