Código del ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio HTML y JavaScript</title>
</head>
<body>
    <h3>Eliminar los espacios de una cadena</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado" size="30">
    </form>
    <script>
        function mostrar(){
            let i = 0, aux = "", s;
            s = document.getElementById('s').value;
            while(i < s.length){
                if(s[i] != ' '){
                    aux += s[i];
                }
                i++;
            }
            document.getElementById('resultado').value = aux;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<h3></h3> --> representa un encabezado de nivel 3.
<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
< --> el operador menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
length --> la propiedad length devuelve la longitud de una cadena.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
!= --> el operador de desigualdad ( != ) comprueba si sus dos operandos no son iguales y devuelve un resultado booleano.
+= --> el operador de asignación de suma ( += ) suma el valor del operando derecho a una variable y asigna el resultado a la variable.
++ --> el operador de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicación del Código:

¿Qué realiza este programa?

Este programa permite ingresar una cadena de texto y elimina todos los espacios en blanco que contiene. Finalmente, muestra la nueva cadena sin espacios en el cuadro de resultado.

Ejemplo:

Entrada: Hola Mundo JavaScript
Salida: HolaMundoJavaScript

Explicación del código HTML

Elemento	Función
<form>	Contiene todos los controles del formulario.
<label>	Muestra un texto indicando qué debe ingresar el usuario.
<input type="text" id="s">	Caja donde el usuario escribe la cadena.
<input type="button">	Ejecuta la función mostrar().
<input type="reset">	Limpia el formulario.
<input id="resultado">	Muestra la cadena sin espacios.

Explicación del código JavaScript

function mostrar(){

    let i = 0, aux = "", s;

    s = document.getElementById("s").value;

    while(i < s.length){

        if(s[i] != ' '){

            aux += s[i];

        }

        i++;

    }

    document.getElementById("resultado").value = aux;

}

Explicación línea por línea

Código	Explicación
function mostrar()	Crea la función que se ejecuta cuando el usuario pulsa el botón "Mostrar".
let i = 0, aux = "", s;	Declara tres variables: i: contador. aux: almacena la nueva cadena. s: guarda la cadena ingresada.
s = document.getElementById("s").value;	Obtiene el texto escrito por el usuario.
while(i < s.length)	Recorre la cadena carácter por carácter.
if(s[i] != ' ')	Comprueba que el carácter actual no sea un espacio.
aux += s[i];	Si no es un espacio, agrega el carácter a la nueva cadena.
i++;	Avanza a la siguiente posición de la cadena.
document.getElementById("resultado").value = aux;	Muestra el resultado sin espacios.

Resumen del funcionamiento

El usuario escribe una cadena.
Se obtiene el texto ingresado.
Se recorre carácter por carácter utilizando un ciclo while.
Si el carácter no es un espacio, se guarda en una nueva cadena.
Los espacios son ignorados.
Al finalizar el recorrido se muestra la cadena sin espacios.

Ejercicios de programación

Páginas

domingo, 28 de junio de 2026

Eliminar los espacios de una cadena en HTML y JavaScript