Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Strings en JS — Ejemplo 3</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background: #fff; }
        table { border-collapse: collapse; width: 100%; margin: 10px 0; }
        th    { background: #F7DF1E; color: #333; text-align: left; padding: 8px 12px; font-size: 13px; }
        td    { padding: 8px 12px; border-bottom: 1px solid #eee; font-family: monospace; font-size: 13px; }
        td:first-child { color: #555; font-weight: bold; }
        tr:hover td    { background: #fafafa; }
        h3 { margin: 20px 0 6px; color: #333; font-size: 15px; }
    </style>
</head>
<body>

<h2>Métodos de Strings</h2>

<h3>Transformar texto</h3>
  <table id="tabla-transform"></table>

<h3>Buscar dentro del string</h3>
  <table id="tabla-buscar"></table>

<h3>Extraer porciones</h3>
  <table id="tabla-extraer"></table>

<h3>Dividir y unir</h3>
  <table id="tabla-dividir"></table>

// ── Transformar ──────────────────────────────────────────────────────
    const frase = "  Hola Mundo  ";
    crearTabla("tabla-transform", [
        [`"${frase}".trim()`,        `"${frase.trim()}"`],
        [`"${frase}".trimStart()`,   `"${frase.trimStart()}"`],
        [`"${frase}".trimEnd()`,     `"${frase.trimEnd()}"`],
        [`"${frase}".toUpperCase()`, `"${frase.toUpperCase()}"`],
        [`"${frase}".toLowerCase()`, `"${frase.toLowerCase()}"`],
        [`"ab".repeat(4)`,           `"${"ab".repeat(4)}"`],
        [`"5".padStart(4, "0")`,     `"${"5".padStart(4, "0")}"`],
    ]);

// ── Buscar ───────────────────────────────────────────────────────────
    const texto = "JavaScript es genial, JavaScript es popular";
    crearTabla("tabla-buscar", [
        [`texto.includes("genial")`,          String(texto.includes("genial"))],
        [`texto.startsWith("Java")`,          String(texto.startsWith("Java"))],
        [`texto.endsWith("popular")`,         String(texto.endsWith("popular"))],
        [`texto.indexOf("JavaScript")`,       String(texto.indexOf("JavaScript"))],
        [`texto.lastIndexOf("JavaScript")`,   String(texto.lastIndexOf("JavaScript"))],
        [`texto.replace("genial","poderoso")`,texto.replace("genial","poderoso")],
        [`texto.replaceAll("JavaScript","JS")`,texto.replaceAll("JavaScript","JS")],
    ]);

// ── Extraer ──────────────────────────────────────────────────────────
    const palabra = "JavaScript";
    crearTabla("tabla-extraer", [
        [`"JavaScript".slice(0, 4)`,  `"${palabra.slice(0, 4)}"`],
        [`"JavaScript".slice(4)`,     `"${palabra.slice(4)}"`],
        [`"JavaScript".slice(-6)`,    `"${palabra.slice(-6)}"`],
        [`"JavaScript".at(0)`,        `"${palabra.at(0)}"`],
        [`"JavaScript".at(-1)`,       `"${palabra.at(-1)}"`],
    ]);

// ── Dividir y unir ───────────────────────────────────────────────────
    const csv = "manzana,naranja,uva,pera";
    const arr  = csv.split(",");
    crearTabla("tabla-dividir", [
        [`"${csv}".split(",")`,              JSON.stringify(arr)],
        [`arr.join(" - ")`,                  arr.join(" - ")],
        [`arr.join("")`,                     arr.join("")],
        [`"Hola Mundo".split(" ")`,          JSON.stringify("Hola Mundo".split(" "))],
    ]);
  </script>

</body>
</html>