Hoe een Lorem Ipsum-tekstgenerator te bouwen met JavaScript en Vite

Lorem ipsum is tekst die ontwikkelaars en ontwerpers over de hele wereld als tijdelijke aanduiding gebruiken. Als u met veel UI-prototypes communiceert, bent u deze waarschijnlijk al eerder tegengekomen.

Leer hoe u een flexibele Lorem ipsum-generator kunt bouwen met Vite en JavaScript en u zult uw ontwikkelingsvaardigheden verbeteren met een bruikbaar resultaat.

Waarom wordt Lorem Ipsum zo veel gebruikt?

Je vraagt ​​je misschien af ​​waarom zoveel ontwikkelaars en ontwerpers voor lorem ipsum kiezen als ze gewoon een pagina uit een boek uit het publieke domein of iets dergelijks kunnen kopiëren. De belangrijkste reden is dat het de gebruiker of kijker een idee geeft van de visuele vorm van een document of prototype, zonder al te veel aandacht te besteden aan de plaatsvervangende tekst zelf.

Stel je voor dat je een krant ontwerpt. In plaats van de moeite te nemen om tekst uit verschillende bronnen te kopiëren om het ontwerp zo te maken realistisch mogelijk, kunt u gewoon de standaard lorem ipsum placeholder-tekst kopiëren en die gebruiken in plaats van.

Lorem ipsum wordt zo algemeen erkend dat u niet eens hoeft aan te geven dat het een plaatsvervangende tekst is - vrijwel iedereen die het tegenkomt, zal onmiddellijk herkennen dat de tekst opvulmateriaal is.

De project- en ontwikkelingsserver opzetten

De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie. Kopieer de inhoud van de stijl.css en de lorem.js bestanden en plak ze in uw eigen lokale kopieën van deze bestanden.

Als je een live versie van dit project wilt zien, kun je dit bekijken demo.

Je gaat gebruik maken van de Vite bouwtool dingen op te zetten. Zorg ervoor dat u Node.js en de Knooppuntpakketbeheerder (NPM) of Yarn geïnstalleerd op uw machine, open dan uw terminal en voer uit:

npm maak vite

Of:

garen creëren vite

Dit zou een leeg Vite-project moeten ondersteunen. Voer de projectnaam in, stel het kader in op "Vanille" en de variant op "Vanille". Navigeer daarna naar de projectdirectory met de CD commando, voer dan uit:

npm ik

Of:

garen

Nadat u alle afhankelijkheden hebt geïnstalleerd, opent u het project in uw teksteditor naar keuze en past u vervolgens de projectstructuur aan om er ongeveer zo uit te zien:

Wis nu de inhoud van het index.html bestand en vervang het door het volgende:

html>
<htmllang="en">
<hoofd>
<metatekenset="UTF-8" />
<koppelingrel="icoon"type="afbeelding/svg+xml"href="/vite.svg" />
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1.0" />
<titel>Lorem Ipsum-generatortitel>
hoofd>
<lichaam>
<h1>Lorem Ipsum-generatorh1>
<divID kaart="app">
<divklas="controles">
<formulier>
<divklas="controle">
<etiketvoor="w-telling">Woorden per alineaetiket>
<div>
<invoertype="bereik"ID kaart="w-telling"min="10"max="100"waarde="25"stap="10">
<spanID kaart="w-count-label">25span>
div>
div>
<divklas="controle">
<etiketvoor="p-telling">Alinea tellenetiket>
<div>
<invoertype="bereik"ID kaart="p-telling"min="1"max="20"stap="1"waarde="3">
<spanID kaart="p-count-label">3span>
div>
div>
<knoptype="indienen">Genereerknop>
formulier>
<knopklas="kopiëren">Kopieer naar klembordknop>
<divklas="info">
 Gebruik de schuifregelaars om de parameters in te stellen en druk vervolgens op de knop "Genereren".

 U kunt de tekst kopiëren door op de knop "Kopiëren naar klembord" te drukken
div>
div>
<divklas="uitvoer">div>
div>
<scripttype="module"src="/main.js">script>
lichaam>
html>

Deze opmaak definieert eenvoudigweg de gebruikersinterface. De linkerkant van het scherm geeft de bedieningselementen weer, terwijl de rechterkant de uitvoer toont. Open vervolgens de main.js bestand, wis de inhoud en voeg een enkele regel toe om te importeren stijl.css:

importeren'./stijl.css'

Het Lorem-bestand importeren en globale variabelen definiëren

Open de GitHub-repository van dit project, kopieer de inhoud van het lorem.js -bestand en plak ze in uw lokale kopie van lorem.js. lorem.js exporteert eenvoudigweg een zeer lange reeks Lorem Ipsum-tekst die andere JavaScript-bestanden kunnen gebruiken.

In de main.js bestand, importeer het lorem touwtje van de lorem.js bestand en definieer de noodzakelijke variabelen:

importeren { lorem } van'./lorem';
laten tekst = lorem.vervangen(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "".split(' ');
laten laatsteChar;
laten wordCountControl = document.querySelector("#w-telling");
laten paragraafCountControl = document.querySelector("#p-telling");
laten wordCountLabel = document.querySelector("#w-count-label");
laten paragraafCountLabel = document.querySelector("#p-count-label");
laten wordCount = wordCountControl.waarde;
laten paragraafCount = paragraafCountControl.waarde;
laten kopiëren = document.querySelector(".kopiëren");

Deze code gebruikt een reguliere expressie om eventuele interpunctie in de lorem tekst. De tekst variabele bindt deze gewijzigde versie van de lorem tekst. Dit zou het makkelijker moeten maken om woorden en paragrafen te genereren.

De generatorfuncties maken

Om elke willekeurig gegenereerde zin of alinea "echt" te laten lijken, moet er interpunctie zijn. Nadat u de globale variabelen hebt gedefinieerd, maakt u een functie met de naam genererenWillekeurigePunctuatie() en maak in die functie een array genaamd karakters en vul het.

functiegenererenwillekeurige interpunctie() {
laten karakters = [",", "!", ".", "?"];
laten karakter = karakters[Wiskunde.vloer(Wiskunde.willekeurig() * karakters.lengte)];
 lastChar = teken;
opbrengst karakter;
}

Het bovenstaande codeblok definieert een array, karakters, dat verschillende leestekens bevat. Het definieert een andere variabele, karakter, die het instelt op een willekeurig element uit de karakters reeks. De globale variabele, laatsteChar, slaat dezelfde waarde op die de functie vervolgens retourneert.

Maak vervolgens een genereerParagraaf() functie met een graaf parameter met een standaardwaarde van 100.

functiegenereerParagraaf(tel = 100) {
}

Verklaar in deze functie a paragraaf array en haal willekeurige woorden op uit de global tekst array, duw het dan in paragraaf.

laten alinea = [];
voor (laten ik = 1; ik <= tellen; ik++) {
 paragraaf.push (tekst[Wiskunde.vloer(Wiskunde.random() * tekst.lengte)].toLowerCase());
}

Voeg vervolgens de code toe om de eerste letter in het eerste woord van elke alinea een hoofdletter te geven:

laten fl=alinea[0];
paragraaf[0] = fl.vervangen (fl[0], fl[0].toUpperCase());

Elke alinea eindigt met een leesteken (meestal een punt), dus voeg de code toe die een punt toevoegt aan het einde van elke alinea.

laten lwPos = alinealengte - 1;
laten lWoord = paragraaf[lwPos];
paragraaf[lwPos] = lWoord.replace (lWoord, lWoord + ".");

Implementeer vervolgens de functionaliteit om een ​​willekeurig gegenereerde interpunctie toe te voegen aan een willekeurig element in de paragraaf reeks.

paragraaf.forEach((woord, index) => {
als (index > 0 && inhoudsopgave % 100) {
laten willekeurigNum = Wiskunde.vloer(Wiskunde.willekeurig() * 4);
laten pos = index + willekeurig getal;
laten randWoord = paragraaf[pos];
 paragraaf[pos] = randWoord.vervangen (randWoord, randWoord + createRandomPunctuation());
laten nWoord=paragraaf[pos + 1];
als (lastChar !== ",") {
 paragraaf[pos + 1] = nWoord.vervangen (nWoord[0], nWoord[0].toUpperCase());
 }
 }
})

Dit codeblok genereert een willekeurig leesteken en voegt dit toe aan het einde van een willekeurig element uit de paragraaf reeks. Nadat de interpunctie is toegevoegd, wordt de eerste letter van het volgende element als hoofdletter geschreven als de interpunctie geen komma is.

Retourneer ten slotte de paragraaf array opgemaakt als een string:

opbrengst paragraaf.join(" ");

De lorem ipsum-tekst moet een 'structuur' hebben op basis van het aantal alinea's dat de gebruiker opgeeft. U kunt een array gebruiken om deze 'structuur' te definiëren. Als de gebruiker bijvoorbeeld een lorem ipsum-tekst met drie alinea's wil, moet de array 'structuur' er als volgt uitzien:

structuur = ["Eerste paragraaf.", "\n\n", "Tweede paragraaf.", "\n\n", "Derde alinea"]

In het bovenstaande codeblok vertegenwoordigt elke "\n \n" de afstand tussen elke alinea. Als je inlogt structuur.join("") in de browserconsole zou u het volgende moeten zien:

Maak een functie die deze structuur automatisch genereert en de genereerParagraaf functie:

functiegenereerStructuur(wordCount, paragraaf = 1) {
laten structuur = [];
voor (laten ik = 0; ik < paragraaf * 2; ik++) {
als (i % 20) structuur[i] = genereerParagraaf (wordCount);
andersals (i < (paragraaf * 2) - 1) structuur[i] = "\n\n";
 }
opbrengst structuur.join("");
}

Gebeurtenislisteners toevoegen aan de bedieningselementen

Voeg een gebeurtenislistener "input" toe aan het wordCountControl invoerelement en stel in de callback-functie de Aantal woorden naar de invoerwaarde. Werk vervolgens het label bij.

wordCountControl.addEventListener("invoer", (e) => {
 wordCount = e.doelwaarde;
 wordCountLabel.textContent= e.doelwaarde;
})

Voeg vervolgens een gebeurtenislistener "input" toe aan het paragraafCountControl invoerelement en stel in de callback-functie het paragraafCount naar de invoerwaarde en werk het label bij.

paragraafCountControl.addEventListener("invoer", (e) => {
 paragraafCount= e.doelwaarde;
 paragraafCountLabel.textContent = e.doelwaarde;
})

Voeg een "click"-gebeurtenislistener toe aan het kopiëren knop die terugbelt naar de Kopieer tekst() wanneer de gebeurtenis wordt geactiveerd.

kopiëren.addEventListener("Klik", ()=>tekst kopiëren());

Voeg ten slotte een "submit" -gebeurtenislistener toe aan het formulier HTML-element en roep het updateUI functie in de callback-functie.

document.querySelector("formulier").addEventListener('indienen', (e) => {
 e.preventDefault();
 updateUI();
})

De gebruikersinterface afronden en bijwerken

Maak een functie aan getControlValues dat keert terug Aantal woorden En paragraafCount als een voorwerp.

functiegetControlValues() {
opbrengst { wordCount, paragraafCount };
}

Maak dan de updateUI() functie die de gegenereerde tekst op het scherm weergeeft voor de gebruiker:

functieupdateUI() {
laten output = createStructure (getControlValues().wordCount, getControlValues().paragraphCount)
document.querySelector(".uitvoer").innerText = uitvoer;
}

Bijna klaar. Maak de Kopieer tekst() functie die de tekst naar het klembord schrijft wanneer de gebruiker op de knop "Kopiëren naar klembord" klikt.

asynchroonfunctieKopieer tekst() {
laten tekst = document.querySelector(".uitvoer").innerTekst;
poging {
wachten navigator.klembord.writeText (tekst);
 alarm ('Gekopieerd naar het klembord');
 } vangst (fout) {
 alarm ('Kan niet kopiëren: ', fout);
 }
 }

Bel dan de updateUI() functie:

updateUI();

Gefeliciteerd! Je hebt een lorem ipsum-tekstgenerator gebouwd met JavaScript en Vite.

Geef uw JavaScript-ontwikkeling een boost met Vite

Vite is een populaire frontend-tool waarmee je eenvoudig je frontend-framework kunt opzetten. Het ondersteunt verschillende frameworks zoals React, Svelte, SolidJS en zelfs gewone JavaScript. Veel JavaScript-ontwikkelaars gebruiken Vite omdat het heel eenvoudig in te stellen en erg snel is.