In diesem Lab werden wir lernen, wie man prüft, ob eine Zeichenkette nur alphanumerische Zeichen enthält, indem wir JavaScript verwenden. Alphanumerische Zeichen umfassen Buchstaben (A-Z, a-z) und Zahlen (0-9). Dies ist eine häufige Aufgabe bei der Formularvalidierung, Datenverarbeitung und in vielen anderen Programmier-Szenarien.
Wir werden eine JavaScript-Funktion erstellen, die reguläre Ausdrücke (regular expressions) verwendet, um zu bestimmen, ob eine Zeichenkette alphanumerisch ist. Am Ende dieses Labs werden Sie verstehen, wie Sie diese Prüfung implementieren können und wie reguläre Ausdrücke in JavaScript zur Validierung von Zeichenkettenmustern eingesetzt werden können.
Mehr als nur ein Lerntext – erlebe es selbst.
Verständnis von alphanumerischen Zeichen
Alphanumerische Zeichen bestehen aus den 26 Buchstaben des englischen Alphabets (sowohl die Großbuchstaben A-Z als auch die Kleinbuchstaben a-z) und den 10 Ziffern (0-9). Wenn wir prüfen, ob eine Zeichenkette alphanumerisch ist, überprüfen wir, dass sie nur diese Zeichen und nichts anderes enthält.
In JavaScript können wir mithilfe von regulären Ausdrücken (regular expressions) auf alphanumerische Zeichen prüfen. Reguläre Ausdrücke (regex) sind Muster, die verwendet werden, um Zeichenkombinationen in Zeichenketten zu finden.
Beginnen wir damit, unseren Code-Editor zu öffnen. Im WebIDE navigieren Sie zum Dateiexplorer auf der linken Seite und erstellen Sie eine neue JavaScript-Datei:
Klicken Sie mit der rechten Maustaste in der Dateiexplorer-Panel.
Wählen Sie "Neue Datei" aus.
Benennen Sie die Datei alphanumeric.js.
Sobald Sie die Datei erstellt haben, sollte sie automatisch im Editor geöffnet werden. Wenn nicht, klicken Sie auf alphanumeric.js im Dateiexplorer, um sie zu öffnen.
Jetzt geben wir folgenden Code ein:
// 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"));
Speichern Sie die Datei, indem Sie Strg+S drücken oder "Datei" > "Speichern" aus dem Menü auswählen.
Jetzt führen wir diese JavaScript-Datei aus, um die Ausgabe zu sehen. Öffnen Sie das Terminal im WebIDE, indem Sie "Terminal" > "Neues Terminal" aus dem Menü auswählen oder Strg+` drücken.
Im Terminal führen Sie folgenden Befehl aus:
node alphanumeric.js
Sie sollten folgende Ausgabe sehen:
Is 'hello123' alphanumeric? true
Is '123' alphanumeric? true
Is 'hello 123' alphanumeric? false
Is 'hello@123' alphanumeric? false
Diese Ausgabe zeigt, dass unsere Funktion hello123 und 123 korrekt als alphanumerische Zeichenketten identifiziert, während hello 123 (enthält ein Leerzeichen) und hello@123 (enthält ein Sonderzeichen @) keine alphanumerischen Zeichenketten sind.
Verständnis von regulären Ausdrücken
Jetzt betrachten wir den regulären Ausdruck, den wir in unserer Funktion verwendet haben:
/^[a-zA-Z0-9]+$/;
Dieses Muster mag komplex aussehen, aber wir können es in Teile zerlegen:
/ - Die Schrägstriche markieren den Anfang und das Ende des regulären Ausdrucksmusters.
^ - Dieses Symbol bedeutet "Anfang der Zeichenkette".
[a-zA-Z0-9] - Dies ist eine Zeichenklasse, die übereinstimmt mit:
a-z: jedem Kleinbuchstaben von 'a' bis 'z'
A-Z: jedem Großbuchstaben von 'A' bis 'Z'
0-9: jeder Ziffer von '0' bis '9'
+ - Dieser Quantifizierer bedeutet "ein oder mehrere" des vorhergehenden Elements.
$ - Dieses Symbol bedeutet "Ende der Zeichenkette".
Das gesamte Muster prüft also, ob die Zeichenkette von Anfang bis Ende nur alphanumerische Zeichen enthält.
Lassen Sie uns unsere Funktion modifizieren, um sie flexibler zu gestalten. Öffnen Sie erneut die Datei alphanumeric.js und aktualisieren Sie sie mit folgendem Code:
// 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"));
Speichern Sie die Datei und führen Sie sie erneut aus mit:
node alphanumeric.js
Sie sollten folgende Ausgabe sehen:
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
Die alternative Funktion verwendet das i-Flag am Ende des regulären Ausdrucks, wodurch die Musterübereinstimmung Groß- und Kleinschreibung ignorierend wird. Das bedeutet, dass wir nur a-z in unserer Zeichenklasse einfügen müssen, und es wird automatisch auch Großbuchstaben übereinstimmen.
Coden ohne Setup – sofort loslegen.
Erstellen eines einfachen Validierungstools
Nachdem wir nun die Funktion zum Prüfen auf alphanumerische Zeichen verstehen, bauen wir ein einfaches interaktives Validierungstool. Wir verwenden das integrierte readline-Modul von Node.js, um Benutzereingaben aus dem Terminal zu erhalten.
Erstellen Sie eine neue Datei namens validator.js im gleichen Verzeichnis:
Klicken Sie mit der rechten Maustaste in der Dateiexplorer-Panel.
Wählen Sie "Neue Datei" aus.
Benennen Sie die Datei validator.js.
Fügen Sie der Datei folgenden Code hinzu:
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();
Speichern Sie die Datei und führen Sie sie aus mit:
node validator.js
Sie werden eine Willkommensnachricht und eine Eingabeaufforderung sehen, in der Sie eine Zeichenkette eingeben sollen. Versuchen Sie, verschiedene Zeichenketten einzugeben, wie z. B.:
hello123 (alphanumerisch)
Hello World (nicht alphanumerisch wegen des Leerzeichens)
hello@123 (nicht alphanumerisch wegen des @-Zeichens)
Für jede Eingabe wird das Programm Ihnen mitteilen, ob die Zeichenkette alphanumerisch ist, und Sie fragen, ob Sie eine weitere Zeichenkette prüfen möchten. Geben Sie yes oder y ein, um fortzufahren, oder eine andere Antwort, um das Programm zu beenden.
Dieses interaktive Tool zeigt, wie unsere Funktion zur Alphanumerischen-Validierung in einer praktischen Anwendung eingesetzt werden kann.
Erkundung anderer Methoden zur Prüfung auf alphanumerische Zeichenketten
Neben der Verwendung von regulären Ausdrücken gibt es andere Methoden, um zu prüfen, ob eine Zeichenkette alphanumerisch ist. Lassen Sie uns einige davon erkunden, indem wir eine neue Datei namens alternative-methods.js erstellen:
Klicken Sie mit der rechten Maustaste in der Dateiexplorer-Panel.
Wählen Sie "Neue Datei" aus.
Benennen Sie die Datei alternative-methods.js.
Fügen Sie der Datei folgenden Code hinzu:
// 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");
Speichern Sie die Datei und führen Sie sie aus mit:
node alternative-methods.js
Die Ausgabe zeigt, wie jede Methode mit verschiedenen Testzeichenketten performt und bietet einen Performance-Vergleich zwischen den Methoden. Die Methode mit regulären Ausdrücken ist typischerweise die kompakteste und oft auch die schnellste, aber es ist nützlich, alternative Ansätze zu verstehen.
Schauen wir uns jede Methode an:
isAlphaNumericRegex: Nutzt einen regulären Ausdruck, um nur alphanumerische Zeichen zu matchen.
isAlphaNumericEvery: Prüft den ASCII-Code jedes Zeichens, um zu bestimmen, ob es alphanumerisch ist.
isAlphaNumericMatch: Entfernt alle alphanumerischen Zeichen und prüft, ob noch etwas übrig bleibt.
Das Verständnis verschiedener Ansätze gibt Ihnen Flexibilität bei der Lösung von Programmierproblemen. Reguläre Ausdrücke sind leistungsstark, können aber manchmal schwer zu lesen sein. Die anderen Methoden könnten für einige Programmierer intuitiver sein, insbesondere für diejenigen, die nicht mit regulären Ausdrucksmustern vertraut sind.
Einfach starten, ohne Installation.
Zusammenfassung
In diesem Lab haben wir untersucht, wie man prüft, ob eine Zeichenkette in JavaScript nur alphanumerische Zeichen enthält. Wir haben mehrere Schlüsselkonzepte gelernt:
Was alphanumerische Zeichen sind (Buchstaben A-Z, a-z und Ziffern 0-9)
Wie man reguläre Ausdrücke verwendet, um Zeichenkettenmuster zu validieren
Das Zerlegen und Verstehen von regulären Ausdrucksmustern wie /^[a-zA-Z0-9]+$/
Das Erstellen eines interaktiven Validierungstools mit Node.js
Die Erkundung alternativer Methoden zur Prüfung auf alphanumerische Zeichenketten
Die Fähigkeit, den Inhalt von Zeichenketten zu validieren, ist eine grundlegende Fähigkeit in der Programmierung und nützlich für:
Formularvalidierung in Webanwendungen
Datenbereinigung und -verarbeitung
Sicherheitsüberprüfungen, um Injektionsangriffe zu verhindern
Validierung von Dateinamen oder Benutzereingaben
Sie können das Gelernte erweitern, indem Sie:
Weitere Validierungsregeln hinzufügen (z. B. Mindestlänge, Anforderungen an Sonderzeichen)
Eine umfassendere Validierungsbibliothek erstellen
Diese Validierungsfunktionen in eine Webanwendung integrieren
Der von uns verwendete Ansatz mit regulären Ausdrücken ist kompakt und effizient, aber denken Sie daran, dass das Verständnis der Alternativen Ihnen mehr Werkzeuge in Ihrem Programmierwerkzeugkasten gibt.
