Neste laboratório, aprenderemos como verificar se uma string contém apenas caracteres alfanuméricos usando JavaScript. Caracteres alfanuméricos incluem letras (A-Z, a-z) e números (0-9). Esta é uma tarefa comum na validação de formulários, processamento de dados e muitos outros cenários de programação.
Criaremos uma função JavaScript que usa expressões regulares (regular expressions) para determinar se uma string é alfanumérica. Ao final deste laboratório, você entenderá como implementar essa verificação e como as expressões regulares podem ser usadas para validar padrões de string em JavaScript.
Compreendendo Caracteres Alfanuméricos
Caracteres alfanuméricos consistem nas 26 letras do alfabeto inglês (tanto maiúsculas A-Z quanto minúsculas a-z) e nos 10 dígitos numéricos (0-9). Quando verificamos se uma string é alfanumérica, estamos verificando se ela contém apenas esses caracteres e nada mais.
Em JavaScript, podemos verificar caracteres alfanuméricos usando expressões regulares (regular expressions). Expressões regulares (regex) são padrões usados para corresponder combinações de caracteres em strings.
Vamos começar abrindo nosso editor de código. No WebIDE, navegue até o explorador de arquivos no lado esquerdo e crie um novo arquivo JavaScript:
Clique com o botão direito no painel do explorador de arquivos
Selecione "Novo Arquivo"
Nomeie o arquivo alphanumeric.js
Depois de criar o arquivo, ele deve abrir automaticamente no editor. Caso contrário, clique em alphanumeric.js no explorador de arquivos para abri-lo.
Agora, vamos inserir o seguinte 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"));
Salve o arquivo pressionando Ctrl+S ou selecionando "Arquivo" > "Salvar" no menu.
Agora, vamos executar este arquivo JavaScript para ver a saída. Abra o terminal no WebIDE selecionando "Terminal" > "Novo Terminal" no menu ou pressionando Ctrl+`.
No terminal, execute o seguinte comando:
node alphanumeric.js
Você deve ver a seguinte saída:
Is 'hello123' alphanumeric? true
Is '123' alphanumeric? true
Is 'hello 123' alphanumeric? false
Is 'hello@123' alphanumeric? false
Esta saída mostra que nossa função identifica corretamente hello123 e 123 como strings alfanuméricas, enquanto hello 123 (contém um espaço) e hello@123 (contém um caractere especial @) não são alfanuméricos.
Compreendendo Expressões Regulares
Agora, vamos examinar a expressão regular que usamos em nossa função:
/^[a-zA-Z0-9]+$/;
Este padrão pode parecer complexo, mas podemos dividi-lo em partes:
/ - As barras marcam o início e o fim do padrão da expressão regular.
^ - Este símbolo significa "início da string".
[a-zA-Z0-9] - Esta é uma classe de caracteres que corresponde a:
a-z: qualquer letra minúscula de 'a' a 'z'
A-Z: qualquer letra maiúscula de 'A' a 'Z'
0-9: qualquer dígito de '0' a '9'
+ - Este quantificador significa "um ou mais" do elemento anterior.
$ - Este símbolo significa "fim da string".
Portanto, o padrão completo verifica se a string contém apenas caracteres alfanuméricos do início ao fim.
Vamos modificar nossa função para torná-la mais flexível. Abra o arquivo alphanumeric.js novamente e atualize-o com o seguinte 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"));
Salve o arquivo e execute-o novamente com:
node alphanumeric.js
Você deve ver a seguinte saída:
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
A função alternativa usa a flag i no final da expressão regular, o que torna a correspondência de padrões insensível a maiúsculas e minúsculas. Isso significa que só precisamos incluir a-z em nossa classe de caracteres, e ela corresponderá automaticamente a letras maiúsculas também.
Criando uma Ferramenta de Validação Simples
Agora que entendemos a função de verificação alfanumérica, vamos construir uma ferramenta de validação interativa simples. Usaremos o módulo readline embutido do Node.js para obter a entrada do usuário do terminal.
Crie um novo arquivo chamado validator.js no mesmo diretório:
Clique com o botão direito no painel do explorador de arquivos
Selecione "Novo Arquivo"
Nomeie o arquivo validator.js
Adicione o seguinte código ao arquivo:
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();
Salve o arquivo e execute-o com:
node validator.js
Você verá uma mensagem de boas-vindas e um prompt pedindo que você insira uma string. Tente inserir strings diferentes, como:
hello123 (alfanumérico)
Hello World (não alfanumérico devido ao espaço)
hello@123 (não alfanumérico devido ao símbolo @)
Para cada entrada, o programa informará se ela é alfanumérica e perguntará se você deseja verificar outra string. Digite yes ou y para continuar, ou qualquer outra resposta para sair do programa.
Esta ferramenta interativa demonstra como nossa função de validação alfanumérica pode ser usada em uma aplicação prática.
Explorando Outras Maneiras de Verificar Strings Alfanuméricas
Além de usar expressões regulares, existem outros métodos para verificar se uma string é alfanumérica. Vamos explorar alguns deles criando um novo arquivo chamado alternative-methods.js:
Clique com o botão direito no painel do explorador de arquivos
Selecione "Novo Arquivo"
Nomeie o arquivo alternative-methods.js
Adicione o seguinte código ao arquivo:
// 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");
Salve o arquivo e execute-o com:
node alternative-methods.js
A saída mostrará como cada método se comporta com diferentes strings de teste e uma comparação de desempenho entre os métodos. O método de expressão regular é tipicamente o mais conciso e, muitas vezes, o mais rápido, mas é útil entender abordagens alternativas.
Vamos analisar cada método:
isAlphaNumericRegex: Usa uma expressão regular para corresponder apenas caracteres alfanuméricos.
isAlphaNumericEvery: Verifica o código ASCII de cada caractere para determinar se ele é alfanumérico.
isAlphaNumericMatch: Remove todos os caracteres alfanuméricos e verifica se algo permanece.
Compreender diferentes abordagens oferece flexibilidade ao resolver problemas de programação. Expressões regulares são poderosas, mas às vezes podem ser difíceis de ler. Os outros métodos podem ser mais intuitivos para alguns programadores, especialmente aqueles que não estão familiarizados com padrões de regex.
Resumo
Neste laboratório, exploramos como verificar se uma string contém apenas caracteres alfanuméricos em JavaScript. Aprendemos vários conceitos-chave:
O que são caracteres alfanuméricos (letras A-Z, a-z e dígitos 0-9)
Como usar expressões regulares para validar padrões de string
Analisando e entendendo padrões de regex como /^[a-zA-Z0-9]+$/
Criando uma ferramenta de validação interativa usando Node.js
Explorando métodos alternativos para verificar strings alfanuméricas
A capacidade de validar o conteúdo de strings é uma habilidade fundamental em programação, útil para:
Validação de formulários em aplicações web
Limpeza e processamento de dados
Verificações de segurança para prevenir ataques de injeção
Validação de nomes de arquivos ou entrada do usuário
Você pode estender o que aprendeu:
Adicionando mais regras de validação (por exemplo, comprimento mínimo, requisitos de caracteres especiais)
Criando uma biblioteca de validação mais abrangente
Integrando essas funções de validação em uma aplicação web
A abordagem de expressão regular que usamos é concisa e eficiente, mas lembre-se de que entender as alternativas oferece mais ferramentas em seu kit de ferramentas de programação.
