Cadena es alfanumérica

JavaScriptJavaScriptBeginner
Practicar Ahora

This tutorial is from open-source community. Access the source code

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, aprenderemos cómo verificar si una cadena contiene solo caracteres alfanuméricos utilizando JavaScript. Los caracteres alfanuméricos incluyen letras (A-Z, a-z) y números (0-9). Esta es una tarea común en la validación de formularios, el procesamiento de datos y muchos otros escenarios de programación.

Crearemos una función de JavaScript que utilice expresiones regulares para determinar si una cadena es alfanumérica. Al final de este laboratorio, entenderás cómo implementar esta comprobación y cómo se pueden utilizar las expresiones regulares para validar patrones de cadenas en JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/logic_ops("Logical Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/str_manip("String Manipulation") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") subgraph Lab Skills javascript/logic_ops -.-> lab-28407{{"Cadena es alfanumérica"}} javascript/cond_stmts -.-> lab-28407{{"Cadena es alfanumérica"}} javascript/functions -.-> lab-28407{{"Cadena es alfanumérica"}} javascript/str_manip -.-> lab-28407{{"Cadena es alfanumérica"}} javascript/array_methods -.-> lab-28407{{"Cadena es alfanumérica"}} end

Comprender los caracteres alfanuméricos

Los caracteres alfanuméricos consisten en las 26 letras del alfabeto inglés (tanto mayúsculas A-Z como minúsculas a-z) y los 10 dígitos numéricos (0-9). Cuando verificamos si una cadena es alfanumérica, estamos comprobando que solo contenga estos caracteres y nada más.

En JavaScript, podemos comprobar los caracteres alfanuméricos utilizando expresiones regulares. Las expresiones regulares (regex) son patrones utilizados para coincidir con combinaciones de caracteres en cadenas.

Comencemos abriendo nuestro editor de código. En el WebIDE, navega hasta el explorador de archivos en el lado izquierdo y crea un nuevo archivo JavaScript:

  1. Haz clic derecho en el panel del explorador de archivos.
  2. Selecciona "Nuevo archivo".
  3. Nombrar el archivo alphanumeric.js.

Una vez que hayas creado el archivo, debería abrirse automáticamente en el editor. Si no es así, haz clic en alphanumeric.js en el explorador de archivos para abrirlo.

new-file

Ahora, ingresemos el siguiente código:

// Function to check if a string is alphanumeric
function isAlphaNumeric(str) {
  // Using regular expression to check for alphanumeric characters
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Example usage
console.log("Is 'hello123' alphanumeric?", isAlphaNumeric("hello123"));
console.log("Is '123' alphanumeric?", isAlphaNumeric("123"));
console.log("Is 'hello 123' alphanumeric?", isAlphaNumeric("hello 123"));
console.log("Is 'hello@123' alphanumeric?", isAlphaNumeric("hello@123"));

Guarda el archivo presionando Ctrl+S o seleccionando "Archivo" > "Guardar" desde el menú.

Ahora, ejecutemos este archivo JavaScript para ver la salida. Abre la terminal en el WebIDE seleccionando "Terminal" > "Nueva terminal" desde el menú o presionando Ctrl+`.

En la terminal, ejecuta el siguiente comando:

node alphanumeric.js

Deberías ver la siguiente salida:

Is 'hello123' alphanumeric? true
Is '123' alphanumeric? true
Is 'hello 123' alphanumeric? false
Is 'hello@123' alphanumeric? false

Esta salida muestra que nuestra función identifica correctamente hello123 y 123 como cadenas alfanuméricas, mientras que hello 123 (contiene un espacio) y hello@123 (contiene un carácter especial @) no son alfanuméricas.

Comprender las expresiones regulares

Ahora, examinemos la expresión regular que utilizamos en nuestra función:

/^[a-zA-Z0-9]+$/;

Este patrón puede parecer complejo, pero podemos descomponerlo en partes:

  1. / - Las barras inclinadas hacia adelante marcan el inicio y el final del patrón de la expresión regular.
  2. ^ - Este símbolo significa "inicio de la cadena".
  3. [a-zA-Z0-9] - Esta es una clase de caracteres que coincide con:
    • a-z: cualquier letra minúscula desde 'a' hasta 'z'
    • A-Z: cualquier letra mayúscula desde 'A' hasta 'Z'
    • 0-9: cualquier dígito desde '0' hasta '9'
  4. + - Este cuantificador significa "uno o más" del elemento precedente.
  5. $ - Este símbolo significa "fin de la cadena".

Así, el patrón completo comprueba si la cadena contiene solo caracteres alfanuméricos desde el inicio hasta el final.

Modifiquemos nuestra función para hacerlo más flexible. Abre el archivo alphanumeric.js nuevamente y actualízalo con el siguiente código:

// Function to check if a string is alphanumeric
function isAlphaNumeric(str) {
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Alternative function using case-insensitive flag
function isAlphaNumericAlt(str) {
  return /^[a-z0-9]+$/i.test(str);
}

// Example usage
console.log("Using first function:");
console.log("Is 'Hello123' alphanumeric?", isAlphaNumeric("Hello123"));
console.log("Is 'HELLO123' alphanumeric?", isAlphaNumeric("HELLO123"));

console.log("\nUsing alternative function with case-insensitive flag:");
console.log("Is 'Hello123' alphanumeric?", isAlphaNumericAlt("Hello123"));
console.log("Is 'HELLO123' alphanumeric?", isAlphaNumericAlt("HELLO123"));

Guarda el archivo y ejecútalo nuevamente con:

node alphanumeric.js

Deberías ver la siguiente salida:

Using first function:
Is 'Hello123' alphanumeric? true
Is 'HELLO123' alphanumeric? true

Using alternative function with case-insensitive flag:
Is 'Hello123' alphanumeric? true
Is 'HELLO123' alphanumeric? true

La función alternativa utiliza la bandera i al final de la expresión regular, lo que hace que la coincidencia de patrones sea insensible a mayúsculas y minúsculas. Esto significa que solo necesitamos incluir a-z en nuestra clase de caracteres, y automáticamente coincidirá con las letras mayúsculas también.

Crear una herramienta de validación simple

Ahora que comprendemos la función de comprobación alfanumérica, construyamos una herramienta de validación interactiva simple. Utilizaremos el módulo readline incorporado en Node.js para obtener la entrada del usuario desde la terminal.

Crea un nuevo archivo llamado validator.js en el mismo directorio:

  1. Haz clic derecho en el panel del explorador de archivos.
  2. Selecciona "Nuevo archivo".
  3. Nombrar el archivo validator.js.

Agrega el siguiente código al archivo:

const readline = require("readline");

// Create a readline interface for user input
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// Function to check if a string is alphanumeric
function isAlphaNumeric(str) {
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Function to check the input
function checkInput(input) {
  if (isAlphaNumeric(input)) {
    console.log(`"${input}" is alphanumeric.`);
  } else {
    console.log(`"${input}" is NOT alphanumeric.`);
    console.log(
      "Alphanumeric strings contain only letters (A-Z, a-z) and numbers (0-9)."
    );
  }

  // Ask if the user wants to check another string
  rl.question("\nDo you want to check another string? (yes/no): ", (answer) => {
    if (answer.toLowerCase() === "yes" || answer.toLowerCase() === "y") {
      askForInput();
    } else {
      console.log("Thank you for using the alphanumeric validator!");
      rl.close();
    }
  });
}

// Function to ask for input
function askForInput() {
  rl.question("Enter a string to check if it is alphanumeric: ", (input) => {
    checkInput(input);
  });
}

// Welcome message
console.log("=== Alphanumeric String Validator ===");
console.log(
  "This tool checks if a string contains only alphanumeric characters (A-Z, a-z, 0-9).\n"
);

// Start the program
askForInput();

Guarda el archivo y ejecútalo con:

node validator.js

Verás un mensaje de bienvenida y una solicitud que te pide que ingreses una cadena. Intenta ingresar diferentes cadenas, como:

  • hello123 (alfanumérica)
  • Hello World (no alfanumérica debido al espacio)
  • hello@123 (no alfanumérica debido al símbolo @)

Para cada entrada, el programa te dirá si es alfanumérica y te preguntará si deseas comprobar otra cadena. Escribe yes o y para continuar, o cualquier otra respuesta para salir del programa.

Esta herramienta interactiva demuestra cómo se puede utilizar nuestra función de validación alfanumérica en una aplicación práctica.

Explorar otras formas de comprobar cadenas alfanuméricas

Además de utilizar expresiones regulares, hay otros métodos para comprobar si una cadena es alfanumérica. Exploremos algunos de ellos creando un nuevo archivo llamado alternative-methods.js:

  1. Haz clic derecho en el panel del explorador de archivos.
  2. Selecciona "Nuevo archivo".
  3. Nombrar el archivo alternative-methods.js.

Agrega el siguiente código al archivo:

// Method 1: Using regular expression (our original method)
function isAlphaNumericRegex(str) {
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Method 2: Using Array.every() and checking each character
function isAlphaNumericEvery(str) {
  // If string is empty, return false
  if (str.length === 0) return false;

  return [...str].every((char) => {
    const code = char.charCodeAt(0);
    // Check if character is a digit (0-9)
    const isDigit = code >= 48 && code <= 57;
    // Check if character is a lowercase letter (a-z)
    const isLowercase = code >= 97 && code <= 122;
    // Check if character is an uppercase letter (A-Z)
    const isUppercase = code >= 65 && code <= 90;

    return isDigit || isLowercase || isUppercase;
  });
}

// Method 3: Using a combination of match() and length
function isAlphaNumericMatch(str) {
  // If string is empty, return false
  if (str.length === 0) return false;

  // Remove all alphanumeric characters and check if anything remains
  const nonAlphaNumeric = str.match(/[^a-zA-Z0-9]/g);
  return nonAlphaNumeric === null;
}

// Test strings
const testStrings = [
  "hello123",
  "HELLO123",
  "hello 123",
  "hello@123",
  "",
  "0123456789",
  "abcdefghijklmnopqrstuvwxyz"
];

// Test each method with each string
console.log("=== Testing Different Methods ===");
console.log("String\t\t\tRegex\tEvery\tMatch");
console.log("---------------------------------------------");

testStrings.forEach((str) => {
  const displayStr = str.length > 10 ? str.substring(0, 10) + "..." : str;
  const paddedStr = displayStr.padEnd(16, " ");

  const regexResult = isAlphaNumericRegex(str);
  const everyResult = isAlphaNumericEvery(str);
  const matchResult = isAlphaNumericMatch(str);

  console.log(`"${paddedStr}"\t${regexResult}\t${everyResult}\t${matchResult}`);
});

console.log("\nPerformance Comparison:");
const iterations = 1000000;
const testString = "hello123ABCxyz45";

console.time("Regex Method");
for (let i = 0; i < iterations; i++) {
  isAlphaNumericRegex(testString);
}
console.timeEnd("Regex Method");

console.time("Every Method");
for (let i = 0; i < iterations; i++) {
  isAlphaNumericEvery(testString);
}
console.timeEnd("Every Method");

console.time("Match Method");
for (let i = 0; i < iterations; i++) {
  isAlphaNumericMatch(testString);
}
console.timeEnd("Match Method");

Guarda el archivo y ejecútalo con:

node alternative-methods.js

La salida mostrará cómo se comporta cada método con diferentes cadenas de prueba y una comparación de rendimiento entre los métodos. El método de expresiones regulares suele ser el más conciso y, a menudo, el más rápido, pero es útil entender enfoques alternativos.

Veamos cada método:

  1. isAlphaNumericRegex: Utiliza una expresión regular para coincidir solo con caracteres alfanuméricos.
  2. isAlphaNumericEvery: Comprueba el código ASCII de cada carácter para determinar si es alfanumérico.
  3. isAlphaNumericMatch: Elimina todos los caracteres alfanuméricos y comprueba si queda algo.

Comprender diferentes enfoques te da flexibilidad al resolver problemas de programación. Las expresiones regulares son poderosas, pero a veces pueden ser difíciles de leer. Los otros métodos pueden ser más intuitivos para algunos programadores, especialmente aquellos que no están familiarizados con los patrones de regex.

Resumen

En este laboratorio, exploramos cómo comprobar si una cadena contiene solo caracteres alfanuméricos en JavaScript. Aprendimos varios conceptos clave:

  1. Qué son los caracteres alfanuméricos (letras de la A a la Z, minúsculas y mayúsculas, y dígitos del 0 al 9)
  2. Cómo utilizar expresiones regulares para validar patrones de cadenas
  3. Desglosar y entender patrones de expresiones regulares como /^[a-zA-Z0-9]+$/
  4. Crear una herramienta de validación interactiva utilizando Node.js
  5. Explorar métodos alternativos para comprobar cadenas alfanuméricas

La capacidad de validar el contenido de una cadena es una habilidad fundamental en la programación, útil para:

  • Validación de formularios en aplicaciones web
  • Limpieza y procesamiento de datos
  • Comprobaciones de seguridad para prevenir ataques de inyección
  • Validación de nombres de archivos o entrada de usuarios

Puedes ampliar lo que has aprendido:

  • Añadiendo más reglas de validación (por ejemplo, longitud mínima, requisitos de caracteres especiales)
  • Creando una biblioteca de validación más completa
  • Integrando estas funciones de validación en una aplicación web

El enfoque de expresiones regulares que utilizamos es conciso y eficiente, pero recuerda que entender las alternativas te da más herramientas en tu kit de programación.