Comment construire un générateur de texte Lorem Ipsum avec JavaScript et Vite

Lorem ipsum est un texte que les développeurs et les concepteurs du monde entier utilisent comme espace réservé. Si vous interagissez avec de nombreux prototypes d'interface utilisateur, vous l'avez probablement déjà rencontré.

Apprenez à créer un générateur Lorem ipsum flexible avec Vite et JavaScript et vous développerez vos compétences en développement avec un résultat utile.

Pourquoi le Lorem Ipsum est-il si largement utilisé?

Vous vous demandez peut-être pourquoi tant de développeurs et de concepteurs choisissent le lorem ipsum alors qu'ils peuvent simplement copier une page d'un livre du domaine public ou similaire. La raison principale est qu'il permet à l'utilisateur ou au spectateur d'avoir une idée de la forme visuelle d'un document ou d'un prototype, sans trop se concentrer sur le texte de l'espace réservé lui-même.

Imaginez que vous concevez un journal. Au lieu de se donner la peine de copier du texte à partir de différentes sources pour rendre le design aussi réaliste que possible, vous pouvez simplement copier le texte d'espace réservé standard du lorem ipsum et l'utiliser plutôt.

Lorem ipsum est si largement reconnu que vous n'avez même pas besoin de spécifier qu'il s'agit d'un texte d'espace réservé - pratiquement tous ceux qui le rencontrent reconnaîtront immédiatement que le texte est un remplissage.

Configuration du serveur de projet et de développement

Le code utilisé dans ce projet est disponible dans un Référentiel GitHub et est libre d'utilisation sous la licence MIT. Copiez le contenu du style.css et le lorem.js fichiers et collez-les dans vos propres copies locales de ces fichiers.

Si vous voulez jeter un œil à une version live de ce projet, vous pouvez consulter ceci démo.

Vous utiliserez le Outil de construction Vite pour mettre les choses en place. Assurez-vous d'avoir Node.js et le Gestionnaire de paquets de nœuds (NPM) ou Yarn installé sur votre machine, puis ouvrez votre terminal et lancez :

npm créer vite

Ou:

fil créer vite

Cela devrait échafauder un projet Vite vide. Entrez le nom du projet, définissez le framework sur "Vanilla" et la variante sur "Vanilla". Après cela, accédez au répertoire du projet avec le CD commande, puis exécutez :

npm je

Ou:

fil

Après avoir installé toutes les dépendances, ouvrez le projet dans l'éditeur de texte de votre choix, puis modifiez la structure du projet pour qu'elle ressemble à ceci :

Maintenant, effacez le contenu du index.html fichier et remplacez-le par ce qui suit :

html>
<htmllangue="fr">
<diriger>
<métajeu de caractères="UTF-8" />
<lienrel="icône"taper="image/svg+xml"href="/vite.svg" />
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0" />
<titre>Générateur de Lorem Ipsumtitre>
diriger>
<corps>
<h1>Générateur de Lorem Ipsumh1>
<dividentifiant="application">
<divclasse="contrôles">
<former>
<divclasse="contrôle">
<étiqueterpour="w-count">Mots par paragrapheétiqueter>
<div>
<saisirtaper="gamme"identifiant="w-count"min="10"maximum="100"valeur="25"marcher="10">
<portéeidentifiant="w-count-label">25portée>
div>
div>
<divclasse="contrôle">
<étiqueterpour="compte-p">Nombre de paragraphesétiqueter>
<div>
<saisirtaper="gamme"identifiant="compte-p"min="1"maximum="20"marcher="1"valeur="3">
<portéeidentifiant="p-count-label">3portée>
div>
div>
<boutontaper="soumettre">Générerbouton>
former>
<boutonclasse="copie">Copier dans le presse-papierbouton>
<divclasse="Info">
 Utilisez les curseurs pour définir les paramètres, puis appuyez sur le bouton "Générer".

 Vous pouvez copier le texte en appuyant sur le bouton "Copier dans le presse-papiers"
div>
div>
<divclasse="sortir">div>
div>
<scénariotaper="module"src="/main.js">scénario>
corps>
html>

Ce balisage définit simplement l'interface utilisateur. Le côté gauche de l'écran affiche les commandes, tandis que le côté droit affiche la sortie. Ensuite, ouvrez le main.js fichier, effacez son contenu et ajoutez une seule ligne à importer style.css:

importer'./style.css'

Importation du fichier Lorem et définition des variables globales

Ouvrez le dépôt GitHub de ce projet, copiez le contenu du lorem.js fichier et collez-les dans votre copie locale de lorem.js. lorem.js exporte simplement une très longue chaîne de texte Lorem Ipsum que d'autres fichiers JavaScript peuvent utiliser.

Dans le main.js fichier, importez le lorem chaîne de la lorem.js fichier et définissez les variables nécessaires :

importer { lorem } depuis'./lorem';
laisser texte = lorem. remplacer (/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").diviser(' ');
laisser dernierChar ;
laisser wordCountControl = document.querySelector("#w-count");
laisser paragrapheCountControl = document.querySelector("#p-count");
laisser wordCountLabel = document.querySelector("#w-count-label");
laisser paragrapheCountLabel = document.querySelector("#p-count-label");
laisser wordCount = wordCountControl.value;
laisser paragrapheCount = paragrapheCountControl.value;
laisser copie = document.querySelector(".copie");

Ce code utilise une expression régulière pour supprimer toute ponctuation dans le lorem texte. Le texte variable lie cette version modifiée de la lorem texte. Cela devrait faciliter la génération de mots et de paragraphes.

Création des fonctions du générateur

Pour qu'une phrase ou un paragraphe généré aléatoirement apparaisse "réel", il doit y avoir une ponctuation. Après avoir défini les variables globales, créez une fonction appelée generateRandomPonctuation() et dans cette fonction créer un tableau appelé personnages et le peupler.

fonctiongenerateRandomPunctuation() {
laisser caractères = [",", "!", ".", "?"];
laisser caractère = caractères[Mathématiques.sol(Mathématiques.random() * caractères.longueur)] ;
 lastChar = caractère ;
retour personnage;
}

Le bloc de code ci-dessus définit un tableau, personnages, qui contient différents signes de ponctuation. Il définit une autre variable, personnage, qu'il définit sur un élément aléatoire de la personnages déployer. La variable globale, dernierCar, stocke la même valeur que la fonction renvoie ensuite.

Ensuite, créez un générerParagraphe() fonctionner avec un compter paramètre qui a une valeur par défaut de 100.

fonctiongénérerParagraphe(compter = 100) {
}

Dans cette fonction, déclarez un paragraphe tableau et récupère des mots aléatoires du global texte tableau, puis poussez-le dans paragraphe.

laisser paragraphe = [] ;
pour (laisser je = 1; je <= compter; je++) {
 paragraphe.push (texte[Mathématiques.sol(Mathématiques.random() * text.length)].toLowerCase());
}

Ensuite, ajoutez le code pour mettre en majuscule la première lettre du premier mot de chaque paragraphe :

laisser fl=paragraphe[0];
paragraphe[0] = fl.replace (fl[0], fl[0].toUpperCase());

Chaque paragraphe se termine par un signe de ponctuation (généralement un point), ajoutez donc le code qui ajoute un point à la fin de chaque paragraphe.

laisser lwPos = paragraphe.longueur - 1;
laisser lMot = paragraphe[lwPos] ;
paragraphe[lwPos] = lWord.replace (lWord, lWord + ".");

Ensuite, implémentez la fonctionnalité pour ajouter une ponctuation générée aléatoirement à un élément aléatoire dans le paragraphe déployer.

paragraphe.forEach((mot, index) => {
si (indice > 0 && indice % 100) {
laisser nombrealéatoire = Mathématiques.sol(Mathématiques.aléatoire() * 4);
laisser pos = index + nombrealéatoire ;
laisser randMot = paragraphe[pos] ;
 paragraphe[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
laisser nMot=paragraphe[pos + 1];
si (dernierCar !== ",") {
 paragraphe[pos + 1] = nWord.replace (nWord[0], nMot[0].toUpperCase());
 }
 }
})

Ce bloc de code génère un caractère de ponctuation aléatoire et l'ajoute à la fin d'un élément aléatoire du paragraphe déployer. Après avoir ajouté la ponctuation, il met en majuscule la première lettre de l'élément suivant si la ponctuation n'est pas une virgule.

Enfin, retournez le paragraphe tableau formaté en chaîne :

retour paragraphe.join(" ");

Le texte lorem ipsum doit avoir une "structure" basée sur le nombre de paragraphes spécifié par l'utilisateur. Vous pouvez utiliser un tableau pour définir cette 'structure'. Par exemple, si l'utilisateur veut un texte lorem ipsum avec trois paragraphes, le tableau 'structure' devrait ressembler à ceci :

structure = ["Premier paragraphe.", "\n\n", "La deuxième paragraphe.", "\n\n", « Troisième paragraphe »]

Dans le bloc de code ci-dessus, chaque "\n \n" représente l'espacement entre chaque paragraphe. Si vous vous connectez structure.join("") dans la console du navigateur, vous devriez voir ce qui suit :

Créez une fonction qui génère automatiquement cette structure et appelle le générerParagraphe fonction:

fonctiongénérerStructure(wordCount, paragraphe = 1) {
laisser structure = [] ;
pour (laisser je = 0; je < paragraphe * 2; je++) {
si (je % 20) structure[i] = generateParagraph (wordCount);
autresi (je < (paragraphe * 2) - 1) structure[i] = "\n\n";
 }
retour structure.join("");
}

Ajout d'écouteurs d'événements aux contrôles

Ajoutez un écouteur d'événement "input" au wordCountControl élément d'entrée et dans la fonction de rappel, définissez l'élément wordCount à la valeur d'entrée. Ensuite, mettez à jour l'étiquette.

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

Ensuite, ajoutez un écouteur d'événement "input" au paragrapheCountControl élément d'entrée et dans la fonction de rappel, définissez l'élément nombre de paragraphes à la valeur d'entrée et mettre à jour l'étiquette.

paragrapheCountControl.addEventListener("saisir", (e) => {
 paragrapheCount= e.target.value ;
 paragrapheCountLabel.textContent = e.target.value;
})

Ajoutez un écouteur d'événement "click" au copie bouton qui rappelle le copier le texte() lorsque l'événement se déclenche.

copie.addEventListener("Cliquez sur", ()=>copyText());

Enfin, ajoutez un écouteur d'événement "submit" au former élément HTML et appelez le mettre à jourUI fonction dans la fonction de rappel.

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

Finition et mise à jour de l'interface utilisateur

Créer une fonction getControlValues qui revient wordCount et nombre de paragraphes comme objet.

fonctiongetControlValues() {
retour { nombre de mots, nombre de paragraphes } ;
}

Créez ensuite le mise à jourUI() fonction qui affiche le texte généré à l'écran pour l'utilisateur :

fonctionmettre à jourUI() {
laisser sortie = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
document.querySelector(".sortir").innerText = sortie;
}

Presque fini. Créer le copier le texte() fonction qui écrit le texte dans le presse-papiers chaque fois que l'utilisateur clique sur le bouton "Copier dans le presse-papiers".

asynchronefonctioncopier le texte() {
laisser texte = document.querySelector(".sortir").innerText;
essayer {
attendre navigator.clipboard.writeText (texte);
 alerte('Copié dans le presse-papier');
 } attraper (erre) {
 alerte('Échec de la copie: ', erreur);
 }
 }

Appelez ensuite le mise à jourUI() fonction:

updateUI();

Toutes nos félicitations! Vous avez construit un générateur de texte lorem ipsum avec JavaScript et Vite.

Boostez votre développement JavaScript avec Vite

Vite est un outil frontal populaire qui facilite la configuration de votre framework frontal. Il prend en charge une variété de frameworks tels que React, Svelte, SolidJS et même JavaScript à la vanille. De nombreux développeurs JavaScript utilisent Vite car il est très facile à configurer et très rapide.