Beispiel für eine JavaScript-Regex-Übereinstimmung - Verwenden von JS Replace für eine Zeichenfolge

Entwickler verwenden seit langem Texteditoren. Und wie die meisten Tools haben alle Texteditoren eine Funktion gemeinsam: Suchen und Ersetzen.

Wenn Sie Find and Replace schon länger verwenden, wissen Sie möglicherweise, wie nützlich diese Funktion ist. Die meisten von uns wissen jedoch nicht, dass dieses Tool noch leistungsfähiger ist, als wir glauben.

Es kann nicht nur einfache Zeichenfolgen ersetzen, sondern auch Muster. Diese Muster werden als reguläre Ausdrücke bezeichnet .

Reguläre Ausdrücke gibt es in JavaScript und den meisten anderen Programmiersprachen. Regex (kurz) ist ein sehr leistungsfähiges Tool, mit dem Sie sowohl einfache als auch komplexe Suchmuster finden können.

String-Suchalgorithmen sind auch ein wichtiger Zweig der Informatik. In diesem Artikel erfahren Sie, wie Sie dieses erstaunliche Tool in JavaScript verwenden.

Warum reguläre Ausdrücke?

Sie werden die wahre Bedeutung regulärer Ausdrücke erst verstehen, wenn Sie ein langes Dokument erhalten und aufgefordert werden, alle E-Mails daraus zu extrahieren.

Sie könnten das manuell tun, aber es gibt eine superschnelle Methode, die dies für Sie tun kann. Die meisten modernen Texteditoren erlauben Regex in ihrer Suchoption. Es wird normalerweise mit bezeichnet .*.

Und das ist noch nicht alles, was Regex kann - E-Mails sind nur ein Beispiel. Sie können nach jeder Art von Zeichenfolge suchen, die einem Muster folgt, z. B. URLs oder Text in Klammern.

Regex kann auch zum Überprüfen bestimmter Mustertypen verwendet werden, z. B. zum Überprüfen von E-Mails. Sie könnten eine lange Validierungslogik wie folgt ersetzen:

function IsValidEmail(email) { if (email.length <= 2) { return false; } if (email.indexOf("@") == -1) { return false; } var parts = email.split("@"); var dot = parts[1].indexOf("."); var len = parts[1].length; var dotSplits = parts[1].split("."); var dotCount = dotSplits.length - 1; if (dot == -1 || dot  2) { return false; } for (var i = 0; i < dotSplits.length; i++) { if (dotSplits[i].length == 0) { return false; } } return true; };

Mit einer einzigen Zeile wie dieser:

function isValidEmail(email) { return /^(([^()\[\]\\.,;:\[email protected]"]+(\.[^()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

Obwohl dieser reguläre Ausdruck beängstigend aussieht, müssen Sie sich nicht daran erinnern. Sobald Sie verstehen, wie es funktioniert, wird es sehr einfach zu implementieren sein.

JavaScript Regex Match

In JavaScript haben wir eine Übereinstimmungsmethode für Zeichenfolgen. Diese Methode kann verwendet werden, um Regex in einer Zeichenfolge abzugleichen.

Diese Methode entspricht der Suchmethode in Texteditoren. Es durchsucht eine bestimmte Zeichenfolge mit einem Regex und gibt ein Array aller Übereinstimmungen zurück. Der Prototyp der Match-Methode lautet wie folgt:

str.match(regexp)

Dies gibt ein Array aller Übereinstimmungen zurück, wenn string ( str) nach regulären Ausdrücken ( regexp) durchsucht wird .

Eine grundlegende Verwendung dieser Methode wäre das Zählen aller Wörter in einer Zeichenfolge. Zum Beispiel:

var str = "This is a test string"; var matchArr = str.match(/\w+/g); console.log(matchArr.length); //prints 5

Wir werden \w+später in diesem Artikel mehr über diesen regulären Ausdruck erfahren .

Mit solchen regulären Ausdrücken können wir verschiedene Aufgaben ausführen, bei denen wir sonst mühsame Logik schreiben müssten. Ein Beispiel war die E-Mail-Validierungsfunktion. Wir müssen alle Kriterien testen, aber mit Regex können Sie es vereinfachen.

Reguläre Ausdrücke sind in den meisten Zeichenfolgenfunktionen gültig. Sie sollten jedoch den Prototyp der Funktion überprüfen, wenn Sie sicher sein möchten. Eine solche Methode ist die Replace-Methode. Lassen Sie uns unten mehr darüber erfahren.

JavaScript-Ersetzungsmethode

JavaScript verfügt über eine Reihe von Funktionen für Zeichenfolgen. Ersetzen ist einer von ihnen. Der Prototyp der Ersetzungsmethode lautet wie folgt:

const newStr = str.replace(regexp|substr, newSubstr|function)

Wie Sie sehen können, wirkt die Ersetzungsmethode auf eine Zeichenfolge und gibt eine Zeichenfolge zurück. Es werden zwei Parameter benötigt: die zu ersetzende Zeichenfolge und die, durch die sie ersetzt werden soll.

Der erste Parameter kann entweder eine Zeichenfolge oder ein regulärer Ausdruck sein. Hier können wir die Kraft regulärer Ausdrücke nutzen, um komplexe Suchmuster durch eine Zeichenfolge zu ersetzen.

Der zweite Parameter könnte auch eine Funktion sein. Schauen wir uns ein Beispiel an, um dies zu demonstrieren:

var str = "This is a test string"; var newStr = str.replace(/\w+/g, function(match) { return match.split("").reverse().join(""); }); console.log(newStr); //prints "sihT si a tset gnirts"

In diesem Beispiel wird jedes Wort in einer Zeichenfolge umgekehrt. Wie Sie sehen können, ist das Ersetzen in Kombination mit Regex ein sehr leistungsfähiges Werkzeug in JavaScript.

Die Ersetzungsmethode kann nützlich sein, wenn Sie ein bestimmtes Suchmuster nach einer gewissen Verarbeitung der ursprünglichen Zeichenfolge durch eine andere Zeichenfolge ersetzen möchten.

Es kann auch verwendet werden, um eine ungültige Übereinstimmung zu korrigieren - zum Beispiel um E-Mails zu validieren und wenn möglich, um ungültige E-Mails zu korrigieren.

Nachdem wir nun wissen, wie nützlich Regex ist, lernen wir einige grundlegende reguläre Ausdrücke und suchen nach Zeichenfolgen.

Grundlegende reguläre Ausdrücke

Obwohl reguläre Ausdrücke ein großes Thema sind, sind die grundlegenden sehr einfach zu verstehen und zu merken. Versuchen wir, einige grundlegende Begriffe zu verstehen, die mit regulären Ausdrücken verbunden sind.

Literale

Ein Literal ist ein beliebiges Zeichen, das als sich selbst und nicht in irgendeiner allgemeinen Form bewertet wird. Somit wordist auch ein gültiger regulärer Ausdruck, der nur mit "Wort" übereinstimmt .

Wenn Sie alle Instanzen eines bestimmten Wortes in JavaScript ersetzen möchten, können Sie Folgendes tun:

var str = "JavaScript is a very popular programming language. javascript is used in web developement. javascript is very easy to learn."; var newStr = str.replace(/javascript/gi,"js"); console.log(newStr); /* prints "js is a very popular programming language. js is used in web developement. js is very easy to learn." */

Dies ersetzt alle Vorkommen von JavaScript durch JS. Dies haben wir mit dem gBezeichner erreicht, der für globale Suche steht. Das heißt, es werden alle Vorkommen und nicht nur das erste durchsucht.

Es gibt auch eine iKennung. Es steht für Suche ohne Berücksichtigung der Groß- und Kleinschreibung. Es stimmt mit der Zeichenfolge überein, die den Fall ignoriert.

Thus a literal can be used to match a specific character or group of characters.

Meta-characters

A meta-character is used for generic search, such as to search any digit, any character, or any alpha-numeric character. These are some common meta-characters:

  • \d matches any digit, that is, digits from 0 to 9
  • \w matches any alpha-numeric character, That is, alphabets a-z, A-Z and digits 0-9.
  • \s matches any whitespace

Similarly, \D , \W and \S match any non-digit, non-alphanumeric, and non-whitespace characters, respectively. For example, \d\d\d would match any three digits in a row.

Quantifiers

A quantifier is used to quantify any literal or meta-character. It can be used to select multiple occurrences of a given character. There are four types of quantifiers defined in regex:

  • * is used to match 0 or more occurrences of a given character.
  • + is used to match 1 or more occurrences of a given character.
  • . is used to match either no occurrence or 1 occurrence of a given character.
  • {min,max} or {n} can be used to match a number of occurrences in a range or a given number of times n

An example would be the one we used above to reverse every word in a string.

  • \w+ matches every word in a string
  • \w matches any alpha-numeric character
  • \w+ matches one or more occurrences of an alpha-numeric character, that is, every word in a string.

We could also use quantifiers to replace multiple whitespaces with a single whitespace. For example:

var str = "This is a string with multiple whitespaces"; var newStr = str.replace(/\s\s+/g, " "); console.log(newStr); //prints "This is a string with multiple whitespaces"

There are plenty of other uses for quantifiers.

Position meta-characters

There are also position meta-characters which represent a position. For example ^ represents the start of a line, $ represents end of a line, and \b represents word boundaries.

Conclusion

In this article, we learned how important regular expressions are. We also saw how they can be used for searching simple as well as complex search patterns.

This has great potential in programming with text. String-matching algorithms are used in DNA matching and form a significant branch of computer science.

Once you master regex you can use it with JavaScript's match and replace methods to simplify long programs and use it for validation of certain patterns. Regex can also help shorten long programs and make them more understandable.

Now you can use your own creativity and make wonderful regex – so good luck with your new skill.

This was a very basic overview of regular expressions. If you want to master the art of regex, I suggest you to check out Daniel Shiffman's tutorial here.

Hey, I hope you loved this article and learned something. You can find me at my internet home, theabbie.github.io  or my Github. Do checkout my other articles. Thank you.