Documentación de cadenasX

Descripción General

El Verificador de Cadenas con Gramáticas Regulares es una herramienta web diseñada para verificar si una cadena de texto cumple con las gramáticas regulares ingresadas por el usuario. Esta página HTML incorpora funcionalidades para agregar gramáticas, definidas mediante expresiones regulares, y luego verificar si una cadena específica se ajusta a estas gramáticas.

Estructura del Código

HTML: Proporciona la estructura básica de la página web. Contiene dos secciones principales: una para agregar gramáticas y otra para verificar cadenas.

CSS: Define los estilos para la apariencia visual de la página, incluyendo el diseño de los campos de entrada, botones y la disposición general del contenido.

JavaScript: Gestiona la lógica de la aplicación, permitiendo agregar gramáticas, verificar cadenas y mostrar los resultados correspondientes.

Funcionalidades Principales

Agregar Gramáticas: Permite al usuario ingresar el nombre de una gramática y su expresión regular asociada, verificando si la expresión regular es válida y almacenándola para su posterior verificación.

Verificar Cadenas: Permite al usuario ingresar una cadena de texto y verificar si esta cumple con las gramáticas regulares previamente agregadas. Muestra los resultados indicando si la cadena cumple o no con cada gramática ingresada.

Funciones JavaScript Principales

agregarGramatica(): Gestiona la adición de nuevas gramáticas mediante la validación de la expresión regular y su almacenamiento para su posterior verificación.

verificarCadena(): Realiza la verificación de la cadena ingresada con respecto a todas las gramáticas previamente agregadas, mostrando los resultados en la interfaz.

Limitaciones y Mejoras Futuras

Validación Avanzada: Se puede implementar una validación más detallada de las expresiones regulares para una mayor precisión y manejo de errores.

Interfaz de Usuario Mejorada: Podrían añadirse elementos visuales adicionales para una experiencia más intuitiva, como indicadores visuales de éxito o fallo en la verificación.

Funcionalidades Adicionales: Se pueden agregar funcionalidades avanzadas, como la eliminación o edición de gramáticas ya agregadas.

Código - OpenSource

<!DOCTYPE html>

<head>

<title>Verificador de Cadenas con Gramáticas Regulares</title>

<style>

body {

font-family: 'Roboto Mono', monospace;

background-color: #f7f7f7;

margin-top: 100px;

margin-bottom: 100px;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

color: #0041a5;

}

.container {

text-align: center;

padding: 30px;

border-radius: 8px;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

background-color: #fff;

width: 80%;

max-width: 600px;

}

input[type="text"] {

padding: 10px;

margin: 10px 5px;

width: calc(70% - 20px);

max-width: 300px;

border: 1px solid #ccc;

border-radius: 4px;

}

button {

padding: 10px 20px;

cursor: pointer;

background-color: #007bff;

color: white;

border: none;

border-radius: 4px;

transition: background-color 0.3s ease;

}

button:hover {

background-color: #0056b3;

}

p {

margin-top: 10px;

color: #0041a5;

}

hr {

margin-top: 20px;

margin-bottom: 20px;

border: none;

border-top: 1px solid #ccc;

}

#infoRegex {

text-align: left;

margin-top: 20px;

padding-top: 20px;

border-top: 1px solid #ccc;

}

#infoRegex h2 {

margin-bottom: 10px;

}

#infoRegex ul {

list-style: none;

padding: 0;

}

#infoRegex li {

margin-bottom: 5px;

}

#infoRegex strong {

color: #007bff;

}

#resultados {

text-align: left;

margin-top: 20px;

}

#resultados p {

margin-bottom: 5px;

}

</style>

</head>

<body>

<h1>Verificador de Cadenas</h1>

<div>

<h2>Agregar Gramática</h2>

<button onclick="agregarGramatica()">Agregar Gramática</button>

<p>Ejemplos de expresiones regulares: 'a+b+', '^[01]+$'</p>

<p>Ingrese una gramática con sus reglas utilizando expresiones regulares.</p>

<p>Por ejemplo, '^a+b+$' valida una secuencia de 'a's seguida por 'b's.</p>

</div>

<hr>

<div>

<h2>Verificar Cadena</h2>

<label for="inputString">Ingrese una cadena:</label>

<button onclick="verificarCadena()">Verificar</button>

<p>Por favor, asegúrese de agregar al menos una gramática antes de verificar la cadena.</p>

<p>Ingrese una cadena para verificar si cumple con las gramáticas agregadas.</p>

</div>

<h2>Información sobre Expresiones Regulares</h2>

<p>Los símbolos más comunes en las expresiones regulares:</p>

<ul>

<li><strong>.</strong>: Representa cualquier carácter excepto nueva línea.</li>

<li><strong>^</strong>: Indica el inicio de la cadena.</li>

<li><strong>$</strong>: Indica el final de la cadena.</li>

<li><strong>*</strong>: Representa cero o más repeticiones del carácter anterior.</li>

<li><strong>+</strong>: Representa una o más repeticiones del carácter anterior.</li>

<li><strong>?</strong>: Representa cero o una repetición del carácter anterior.</li>

<li><strong>[ ]</strong>: Lista de caracteres permitidos. Ejemplo: <strong>[ab]</strong> acepta 'a' o 'b'.</li>

<li><strong>{}</strong>: Indica un rango específico de repeticiones. Ejemplo: <strong>a{3}</strong> acepta 'aaa'.</li>

<li><strong>|</strong>: Realiza una alternancia. Ejemplo: <strong>a|b</strong> acepta 'a' o 'b'.</li>

<li><strong>\</strong>: Se utiliza para escapar de caracteres especiales.</li>

</ul>

</div>

let gramaticas = [];

function agregarGramatica() {

const nombreGramatica = document.getElementById('nombreGramatica').value;

const expresionRegular = document.getElementById('expresionRegular').value;

if (nombreGramatica && expresionRegular) {

try {

const nuevaGramatica = {

nombre: nombreGramatica,

regex: new RegExp(expresionRegular)

};

gramaticas.push(nuevaGramatica);

alert('Gramática agregada correctamente.');

} catch (error) {

alert('Error al agregar la gramática. Asegúrese de ingresar una expresión regular válida.');

}

} else {

alert('Por favor, complete todos los campos.');

}

function verificarCadena() {

const input = document.getElementById('inputString').value;

const resultadosDiv = document.getElementById('resultados');

resultadosDiv.innerHTML = '';

if (gramaticas.length === 0) {

alert('Por favor, agregue al menos una gramática antes de verificar la cadena.');

return;

}

gramaticas.forEach(gramatica => {

const resultado = document.createElement('p');

resultado.textContent = `La cadena ${gramatica.regex.test(input) ? 'cumple' : 'no cumple'} con la gramática: ${gramatica.nombre}`;

resultado.style.color = gramatica.regex.test(input) ? 'green' : 'red';

resultadosDiv.appendChild(resultado);

});

}

</script>

</body>

</html>

< Volver