Cómo construir un generador de texto de Lorem Ipsum con JavaScript y Vite

Lorem ipsum es un texto que los desarrolladores y diseñadores de todo el mundo utilizan como marcador de posición. Si interactúa con muchos prototipos de interfaz de usuario, probablemente lo haya encontrado antes.

Aprenda a construir un generador de Lorem ipsum flexible con Vite y JavaScript y mejorará sus habilidades de desarrollo con un resultado útil.

¿Por qué se usa tanto Lorem Ipsum?

Quizás se pregunte por qué tantos desarrolladores y diseñadores eligen lorem ipsum cuando simplemente podrían copiar una página de un libro de dominio público o similar. La razón principal es que permite que el usuario o espectador tenga una idea de la forma visual de un documento o prototipo, sin enfocarse demasiado en el texto del marcador de posición en sí.

Imagina que estás diseñando un periódico. En lugar de tomarse la molestia de copiar texto de diferentes fuentes para hacer el diseño como realista posible, simplemente puede copiar el texto de marcador de posición estándar de lorem ipsum y usarlo en cambio.

Lorem ipsum es tan ampliamente reconocido que ni siquiera necesita especificar que es un texto de marcador de posición: prácticamente todos los que lo encuentren reconocerán de inmediato que el texto es de relleno.

Configuración del servidor de proyectos y desarrollo

El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT. Copie el contenido de la estilo.css y el lorem.js y péguelos en sus propias copias locales de estos archivos.

Si desea ver una versión en vivo de este proyecto, puede consultar este manifestación.

Estarás usando el Herramienta de compilación virtual para configurar las cosas. Asegúrese de tener Node.js y el Administrador de paquetes de nodos (NPM) o Yarn instalado en su máquina, luego abra su terminal y ejecute:

npm crear vite

O:

hilo crear vite

Esto debería servir de andamio para un proyecto Vite vacío. Ingrese el nombre del proyecto, establezca el marco en "Vanilla" y la variante en "Vanilla". Después de hacer eso, navegue al directorio del proyecto con el cd comando, luego ejecute:

npm yo

O:

hilo

Después de instalar todas las dependencias, abra el proyecto en el editor de texto de su elección, luego modifique la estructura del proyecto para que se vea así:

Ahora, borre el contenido de la índice.html archivo y reemplácelo con lo siguiente:

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8" />
<enlacereal="icono"tipo="imagen/svg+xml"href="/vite.svg" />
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0" />
<título>Generador Lorem Ipsumtítulo>
cabeza>
<cuerpo>
<h1>Generador Lorem Ipsumh1>
<divisiónidentificación="aplicación">
<divisiónclase="control S">
<forma>
<divisiónclase="control">
<etiquetapara="w-contar">palabras por párrafoetiqueta>
<división>
<aportetipo="rango"identificación="w-contar"min="10"máximo="100"valor="25"paso="10">
<duraridentificación="w-cuenta-etiqueta">25durar>
división>
división>
<divisiónclase="control">
<etiquetapara="p-cuenta">Recuento de párrafosetiqueta>
<división>
<aportetipo="rango"identificación="p-cuenta"min="1"máximo="20"paso="1"valor="3">
<duraridentificación="p-recuento-etiqueta">3durar>
división>
división>
<botóntipo="entregar">Generarbotón>
forma>
<botónclase="Copiar">Copiar al portapapelesbotón>
<divisiónclase="información">
 Use los controles deslizantes para establecer los parámetros, luego presione el botón "Generar".

 Puede copiar el texto presionando el botón "Copiar al portapapeles"
división>
división>
<divisiónclase="producción">división>
división>
<guiontipo="módulo"origen="/principal.js">guion>
cuerpo>
html>

Este marcado simplemente define la interfaz de usuario. El lado izquierdo de la pantalla muestra los controles, mientras que el lado derecho muestra la salida. A continuación, abra el principal.js archivo, borre su contenido y agregue una sola línea para importar estilo.css:

importar'./estilo.css'

Importación del archivo Lorem y definición de variables globales

Abra el repositorio de GitHub de este proyecto, copie el contenido del lorem.js y péguelos en su copia local de lorem.js. lorem.js simplemente exporta una cadena muy larga de texto de Lorem Ipsum que otros archivos JavaScript pueden usar.

En el principal.js archivo, importe el lorem cuerda de la lorem.js archivo y definir las variables necesarias:

importar { lorem } de'./lorem';
dejar texto = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").dividir(' ');
dejar últimoCarácter;
dejar wordCountControl = documento.querySelector("#w-count");
dejar controlCuentaparrafos = documento.querySelector("#p-cuenta");
dejar wordCountLabel = documento.querySelector("#w-count-etiqueta");
dejar etiquetaCuentapárrafo = documento.querySelector("#p-recuento-etiqueta");
dejar wordCount = wordCountControl.value;
dejar párrafoCount = párrafoCountControl.value;
dejar copiar = documento.querySelector(".Copiar");

Este código utiliza una expresión regular para eliminar cualquier puntuación en el lorem texto. El texto variable vincula esta versión modificada de la lorem texto. Esto debería facilitar la generación de palabras y párrafos.

Crear las funciones del generador

Para que cualquier oración o párrafo generado aleatoriamente parezca "real", debe haber puntuación. Después de definir las variables globales, cree una función llamada generarPuntuaciónAleatoria() y en esa función crea una matriz llamada caracteres y poblarlo.

funcióngenerarPuntuación aleatoria() {
dejar caracteres = [",", "!", ".", "?"];
dejar personaje = personajes[Matemáticas.piso(Matemáticas.random() * caracteres.longitud)];
 lastChar = caracter;
devolver personaje;
}

El bloque de código anterior define una matriz, caracteres, que contiene diferentes signos de puntuación. Define otra variable, personaje, que establece en un elemento aleatorio de la caracteres formación. La variable global, lastChar, almacena el mismo valor que luego devuelve la función.

A continuación, cree un generar párrafo () funcionar con un contar parámetro que tiene un valor predeterminado de 100.

funcióngenerar párrafo(contar = 100) {
}

En esta función, declara un párrafo matriz y obtener palabras aleatorias del global texto matriz, luego empújelo hacia párrafo.

dejar párrafo = [];
para (dejar yo = 1; yo <= cuenta; i++) {
 párrafo.push (texto[Matemáticas.piso(Matemáticas.random() * texto.longitud)].toLowerCase());
}

A continuación, agregue el código para poner en mayúscula la primera letra de la primera palabra de cada párrafo:

dejar fl=párrafo[0];
párrafo[0] = fl.reemplazar (fl[0], fl[0].toUpperCase());

Cada párrafo termina con un signo de puntuación (generalmente un punto), así que agregue el código que agrega un punto al final de cada párrafo.

dejar lwPos = párrafo.longitud - 1;
dejar lPalabra = párrafo[lwPos];
párrafo[lwPos] = lPalabra.reemplazar (lPalabra, lPalabra + ".");

Luego, implemente la funcionalidad para agregar una puntuación generada aleatoriamente a un elemento aleatorio en el párrafo formación.

párrafo.forEach((palabra, índice) => {
si (índice > 0 && índice % 100) {
dejar numero aleatorio = Matemáticas.piso(Matemáticas.aleatorio() * 4);
dejar pos = índice + número aleatorio;
dejar randWord = párrafo[pos];
 párrafo[pos] = randWord.replace (randWord, randWord + generarRandomPunctuation());
dejar nPalabra=párrafo[pos + 1];
si (últimoCarácter !== ",") {
 párrafo[pos + 1] = nPalabra.reemplazar (nPalabra[0], nPalabra[0].toUpperCase());
 }
 }
})

Este bloque de código genera un carácter de puntuación aleatorio y lo agrega al final de un elemento aleatorio del párrafo formación. Después de agregar la puntuación, escribe en mayúscula la primera letra del siguiente elemento si la puntuación no es una coma.

Finalmente, devuelva el párrafo matriz formateada como una cadena:

devolver párrafo.join(" ");

El texto de lorem ipsum debe tener una 'estructura' basada en la cantidad de párrafos que especifica el usuario. Puede usar una matriz para definir esta 'estructura'. Por ejemplo, si el usuario quiere un texto de lorem ipsum con tres párrafos, la matriz de 'estructura' debería verse así:

estructura = ["Primer párrafo.", "\n\n", "Segundo parrafo.", "\n\n", "Tercer párrafo"]

En el bloque de código anterior, cada "\n \n" representa el espacio entre cada párrafo. si inicias sesión estructura.join("") en la consola del navegador, debería ver lo siguiente:

Cree una función que genere automáticamente esta estructura y llame al generar párrafo función:

funcióngenerarEstructura(wordCount, párrafo = 1) {
dejar estructura = [];
para (dejar yo = 0; yo < párrafo * 2; i++) {
si (i % 20) estructura[i] = generarParagraph (wordCount);
demássi (i < (párrafo * 2) - 1) estructura[i] = "\n\n";
 }
devolver estructura.join("");
}

Adición de detectores de eventos a los controles

Agregue un detector de eventos de "entrada" al wordCountControl elemento de entrada y en la función de devolución de llamada, establezca el el recuento de palabras al valor de entrada. Luego actualice la etiqueta.

wordCountControl.addEventListener("aporte", (e) => {
 wordCount = e.objetivo.valor;
 wordCountLabel.textContent= e.objetivo.valor;
})

A continuación, agregue un detector de eventos de "entrada" al párrafoCountControl elemento de entrada y en la función de devolución de llamada establecer el número de párrafos al valor de entrada y actualice la etiqueta.

párrafoCountControl.addEventListener("aporte", (e) => {
 párrafoCount= e.objetivo.valor;
 párrafoCountLabel.textContent = e.target.value;
})

Agregue un detector de eventos de "clic" al Copiar botón que vuelve a llamar al copiar texto() cuando se desencadena el evento.

copiar.addEventListener("hacer clic", ()=>copiarTexto());

Por último, agregue un detector de eventos "enviar" al forma elemento HTML y llamar al actualizar la interfaz de usuario función en la función de devolución de llamada.

documento.querySelector("forma").addEventListener('entregar', (e) => {
 e.preventDefault();
 actualizarUI();
})

Finalización y actualización de la interfaz de usuario

Crear una función obtener valores de control que regresa el recuento de palabras y número de párrafos como un objeto

funciónobtener valores de control() {
devolver { número de palabras, número de párrafos };
}

Luego crea el actualizar UI () función que representa el texto generado en la pantalla para el usuario:

funciónactualizar la interfaz de usuario() {
dejar salida = generar estructura (getControlValues().wordCount, getControlValues().paragraphCount)
documento.querySelector(".producción").innerText = salida;
}

Casi termino. Crear el copiar texto() función que escribe el texto en el portapapeles cada vez que el usuario hace clic en el botón "Copiar al portapapeles".

asíncronofuncióncopiar texto() {
dejar texto = documento.querySelector(".producción").textointerno;
intentar {
esperar navegador.clipboard.writeText (texto);
 alerta('Copiado al portapapeles');
 } atrapar (Error) {
 alerta('Error al copiar:', error);
 }
 }

Entonces llame al actualizar UI () función:

actualizarUI();

¡Felicidades! Ha creado un generador de texto lorem ipsum con JavaScript y Vite.

Potencie su desarrollo de JavaScript con Vite

Vite es una herramienta de interfaz de usuario popular que facilita la configuración de su marco de interfaz de usuario. Admite una variedad de marcos como React, Svelte, SolidJS e incluso JavaScript estándar. Muchos desarrolladores de JavaScript usan Vite porque es muy fácil de configurar y muy rápido.