Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Strings en JS — Ejemplo 4</title>
    <style>
        body     { font-family: Arial, sans-serif; padding: 20px; background: #fff; }
        .seccion { border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 12px 0; }
        .seccion h3 { margin: 0 0 10px; font-size: 14px; color: #555; text-transform: uppercase; letter-spacing: 1px; }
        .fila    { display: flex; gap: 12px; margin: 4px 0; font-size: 14px; }
        .clave   { color: #888; min-width: 160px; font-family: monospace; }
        .val     { color: #222; font-family: monospace; font-weight: bold; }
        .ok      { color: #059669; }
        .mal     { color: #dc2626; }
    </style>
</head>
<body>

<h2>Procesador de texto — caso completo</h2>

<div class="seccion">
    <h3>Formateo de nombre</h3>
    <div id="nombres"></div>
  </div>

<div class="seccion">
    <h3>Normalización de email</h3>
    <div id="emails"></div>
  </div>

<div class="seccion">
    <h3>Análisis de frase</h3>
    <div id="analisis"></div>
  </div>

<div class="seccion">
    <h3>Validaciones básicas</h3>
    <div id="validaciones"></div>
  </div>

function fila(clave, valor, clase = "") {
        return `<div class="fila"><span class="clave">${clave}</span><span class="val ${clase}">${valor}</span></div>`;
    }

// ── Formateo de nombre ────────────────────────────────────────────────
    const nombreRaw = "  juan pablo pérez  ";

const nombreTrim = nombreRaw.trim();
    // Capitalizar cada palabra: "juan" → "Juan"
    const nombreFormateado = nombreTrim
        .split(" ")
        .map(p => p.charAt(0).toUpperCase() + p.slice(1))
        .join(" ");
    const iniciales = nombreFormateado
        .split(" ")
        .map(p => p[0] + ".")
        .join(" ");

document.getElementById("nombres").innerHTML =
        fila("Original (raw)",        `"${nombreRaw}"`) +
        fila("Después de trim()",     `"${nombreTrim}"`) +
        fila("Capitalizado",          `"${nombreFormateado}"`) +
        fila("Iniciales",             `"${iniciales}"`);

// ── Normalización de email ────────────────────────────────────────────
    const emailRaw = "  JUAN.PEREZ@GMAIL.COM  ";
    const emailLimpio = emailRaw.trim().toLowerCase();
    const [usuario, dominio] = emailLimpio.split("@");
    const esEmailValido = emailLimpio.includes("@") && emailLimpio.includes(".");

document.getElementById("emails").innerHTML =
        fila("Original",          `"${emailRaw}"`) +
        fila("Normalizado",       `"${emailLimpio}"`) +
        fila("Usuario",           `"${usuario}"`) +
        fila("Dominio",           `"${dominio}"`) +
        fila("¿Parece válido?",   esEmailValido ? "✓ Sí" : "✗ No", esEmailValido ? "ok" : "mal");

// ── Análisis de frase ─────────────────────────────────────────────────
    const frase = "  JavaScript es el lenguaje de la web moderna  ";
    const fraseLimpia = frase.trim();
    const palabras    = fraseLimpia.split(/\s+/);
    const contieneJS  = fraseLimpia.toLowerCase().includes("javascript");
    const invertida   = fraseLimpia.split("").reverse().join("");

document.getElementById("analisis").innerHTML =
        fila("Frase",             `"${fraseLimpia}"`) +
        fila("Longitud",          `${fraseLimpia.length} caracteres`) +
        fila("Palabras",          `${palabras.length} palabras`) +
        fila("Primera palabra",   `"${palabras[0]}"`) +
        fila("Última palabra",    `"${palabras.at(-1)}"`) +
        fila("Contiene JS",       contieneJS ? "✓ Sí" : "✗ No", contieneJS ? "ok" : "mal") +
        fila("Invertida",         `"${invertida.slice(0, 30)}..."`);

// ── Validaciones ──────────────────────────────────────────────────────
    const casos = [
        { valor: "Ana",         descripcion: "Nombre corto válido" },
        { valor: "",            descripcion: "Vacío" },
        { valor: "   ",         descripcion: "Solo espacios" },
        { valor: "a",           descripcion: "Muy corto (< 2)" },
        { valor: "Juan Pérez",  descripcion: "Nombre completo" },
    ];

</body>
</html>