Reguläre JavaScript-Ausdrücke, dieser Artikel reicht aus

So starten Sie schnell mit VUE3.0: Einstieg ins Lernen

Verwandte Empfehlungen: JavaScript-Tutorial

Was ist ein regulärer Ausdruck? Ein

regulärer Ausdruck ( Regulärer Ausdruck, auch als Regexp bezeichnet )

• ist eine grammatikalische Regel, die die Struktur einer Zeichenfolge beschreibt.
• Dabei handelt es sich um ein spezifisches Formatierungsmuster, mit dem überprüft wird, ob verschiedene Zeichenfolgen mit dieser Funktion übereinstimmen, wodurch erweiterte Textsuche, -ersetzung, das Abfangen von Inhalten und andere Vorgänge ermöglicht werden.

Anwendung: In der Projektentwicklung können Funktionen wie das Ausblenden bestimmter Ziffern von Mobiltelefonnummern, die Datenerfassung, das Filtern sensibler Wörter und die Formularüberprüfung mithilfe regulärer Ausdrücke implementiert werden.

Anwendbare Bereiche: In Betriebssystemen (Unix, Linux usw.), Programmiersprachen (C, C++, Java, PHP, Python, JavaScript usw.).

Beispiel: Nehmen Sie als Beispiel die Textsuche. Wenn Sie in einer großen Textmenge eine Zeichenfolge finden, die mit einem bestimmten Merkmal (z. B. einer Mobiltelefonnummer) übereinstimmt, schreiben Sie dieses Merkmal gemäß der Syntax eines regulären Ausdrucks, um eine zu bilden Muster, das vom Computerprogramm erkannt wird (Muster), und dann gleicht das Computerprogramm den Text anhand dieses Musters ab, um die Zeichenfolge zu finden, die den Regeln entspricht.

Die Geschichte der regulären Ausdrücke

Ausdrucksform eines regulären Ausdrucks

• Einer davon ist ein mit der POSIX-Spezifikation kompatibler regulärer Ausdruck, der zur Gewährleistung der Portabilität zwischen Betriebssystemen verwendet wird.
• Zum einen wurden bei der Entwicklung von Perl (einer funktionsreichen Programmiersprache) reguläre Perl-Ausdrücke abgeleitet. Die reguläre Syntax in JavaScript basiert auf Perl.

Verwendung regulärer Ausdrücke

Während der Entwicklung ist es häufig erforderlich, bestimmte Zeichenfolgen anhand regulärer Übereinstimmungsmuster zu suchen und abzugleichen.

exec()-Methode

• Die exec()-Methode wird verwendet, um nach Übereinstimmungen in der Zielzeichenfolge zu suchen und gibt jeweils nur ein übereinstimmendes Ergebnis zurück.
• Suchen Sie beispielsweise nach abc in der angegebenen Zeichenfolge str.

• Das „/“ in „/abc/i“ ist das Trennzeichen des regulären Ausdrucks, „abc“ stellt den Mustertext des regulären Ausdrucks dar und „i“ ist die Musteränderungskennung, was bedeutet, dass die Groß-/Kleinschreibung in str ignoriert wird.
• Der Parameter der exec()-Methode ist der abzugleichende String str. Wenn der Abgleich erfolgreich ist, ist der Rückgabewert dieser Methode ein Array, andernfalls gibt sie null zurück.
• Aus dem Rückgabeergebnis von exec() ist ersichtlich, dass das erste im Array gespeicherte Element (AbC) die übereinstimmende Zeichenfolge darstellt und der Index des zweiten Elements den Indexwert des übereinstimmenden Zeichens in der Zielzeichenfolge darstellt (ab 0). ; die dritte Parametereingabe repräsentiert die Zielzeichenfolge (AbC123abc456).

match()-Methode

Zusätzlich zum Abrufen des angegebenen Werts in der Zeichenfolge kann die match()-Methode im String-Objekt auch alle Inhalte, die den Anforderungen in der Zielzeichenfolge entsprechen, gemäß regulären Regeln abgleichen und diese anschließend in einem Array speichern Übereinstimmung ist erfolgreich, gibt false zurück, wenn die Übereinstimmung fehlschlägt.

• Der Locator „^“ kann verwendet werden, um den Anfang einer Zeichenfolge abzugleichen.
• Der Locator „$“ kann verwendet werden, um das Ende einer Zeichenfolge abzugleichen.
• g stellt eine globale Übereinstimmung dar, die verwendet wird, um die Suche fortzusetzen, nachdem die erste Übereinstimmung gefunden wurde.

Ein reguläres Objekt abrufen

In einer JavaScript-Anwendung müssen Sie zunächst ein reguläres Objekt erstellen, bevor Sie reguläre Ausdrücke verwenden können. Zusätzlich zur zuvor erläuterten Literalerstellung kann es auch über den Konstruktor des RegExp-Objekts erstellt werden.

• Muster ist ein Mustertext mit regulären Ausdrücken, der aus Metazeichen und Literalzeichen besteht.
• Metazeichen sind Zeichen mit besonderer Bedeutung, wie zum Beispiel „^“, „.“ oder „*“.
• Textzeichen sind gewöhnlicher Text wie Buchstaben und Zahlen.
• Flags stellt die Musteränderungskennung dar, die zum weiteren Festlegen des regulären Ausdrucks verwendet wird.
  
  

• Modusmodifikatoren können je nach tatsächlichem Bedarf auch in mehreren Kombinationen verwendet werden.
• Um beispielsweise sowohl die Groß-/Kleinschreibung zu ignorieren als auch global abzugleichen, können Sie gi direkt verwenden, und beim Schreiben mehrerer Mustermodifikatoren ist keine Reihenfolge erforderlich.
• Daher kann die sinnvolle Verwendung von Mustermodifikatoren reguläre Ausdrücke prägnanter und intuitiver machen.

Um den Lesern ein besseres Verständnis des Erwerbs regulärer Objekte zu ermöglichen, wird eine vergleichende Erklärung anhand der Zuordnung der Sonderzeichen „^“, „$“, „*“, „.“ und „“ gegeben.

• Der Selektor „|“ bedeutet „oder“ und die Suchbedingung kann festgelegt werden, solange eine der Bedingungen erfüllt ist.
• Es gibt ein Escape-Problem mit Zeichenfolgen in JavaScript, daher stellt das „“ in str im Code einen Backslash „“ dar.
• Beim Abgleichen von Sonderzeichen in regulären Ausdrücken sind auch Backslashes () erforderlich, um die Sonderzeichen zu maskieren. Beispielsweise wird „\“ nach dem String-Escape zu „“, und dann verwendet der reguläre Ausdruck „“, um mit „“ übereinzustimmen.

Beachten Sie, dass

die von der Konstruktormethode und der Literalmethode erstellten regulären Objekte zwar in ihrer Funktion völlig identisch sind, sie jedoch bestimmte Unterschiede in der Syntaximplementierung aufweisen. Das erstere Muster muss bei Verwendung mit einem Backslash () maskiert werden. Beim Schreiben des letztgenannten Musters sollte es innerhalb des Trennzeichens „/“ platziert werden und das Flags-Tag sollte außerhalb des Endtrennzeichens platziert werden.

von Zeichenkategorien

: Durch die effektive Verwendung von Zeichenkategorien können reguläre Ausdrücke präziser und leichter lesbar werden.

Beispiel 1: Großbuchstaben, Kleinbuchstaben und Zahlen können direkt mit „w“ dargestellt werden.

Fall 2: Wenn Sie Zahlen zwischen 0 und 9 abgleichen möchten, können Sie „d“ verwenden.

Um den Lesern das Verständnis der Verwendung von Zeichenkategorien zu erleichtern, werden im Folgenden „.“ und „s“ als Beispiele zur Demonstration verwendet.

• Die reguläre Objektregistrierung wird verwendet, um zwei beliebige Zeichen nach einem Leerzeichen abzugleichen (außer Zeilenumbrüche).
• Daher steht in den auf der Konsole angezeigten Ergebnissen ein Leerzeichen vor der ID.

Zeichensatz

Darstellung von Zeichensätzen: „[]“ kann einen Zeichensatz implementieren.

Zeichenbereich: In Verbindung mit dem Bindestrich „-“ bedeutet dies, dass Zeichen innerhalb des angegebenen Bereichs übereinstimmen.

Antonymzeichen: Wenn das Metazeichen „^“ zusammen mit „[]“ verwendet wird, spricht man von einem Antonymzeichen.

Nicht innerhalb eines bestimmten Bereichs: „^“ wird zusammen mit „[]“ verwendet, um Zeichen zu finden, die nicht innerhalb des angegebenen Zeichenbereichs liegen.

Nehmen Sie die Zeichenfolge „get好TB6“.match(/pattern/g) als Beispiel, um ihre häufige Verwendung zu demonstrieren.

Beachten Sie

, dass das Zeichen „-“ normalerweise nur ein gewöhnliches Zeichen darstellt und nur

als Metazeichen bei der Darstellung eines Zeichenbereichs verwendet wird. Der durch den Bindestrich „-“ dargestellte Bereich folgt der Reihenfolge der Zeichenkodierung. Beispielsweise sind „aZ“, „za“ und „a-9“ allesamt unzulässige Bereiche.

[Fall] ​​Beschränken Sie den Eingabeinhalt

Idee zur Code-Implementierung :

Schreiben Sie HTML, legen Sie ein Textfeld für das Jahr (Jahr) und den Monat (Monat) sowie eine Abfrageschaltfläche fest.

Rufen Sie das Elementobjekt der Operation ab und überprüfen Sie die Übermittlung des Formulars.

Überprüfen Sie das Jahr, reguläre Form: /^d{4}/. Überprüfen Sie den Monat, reguläre Regel: / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /.

Das Textfeld erhält den Fokus und die Farbe des Eingabeaufforderungsfelds wird entfernt. Das Textfeld verliert den Fokus, entfernt Leerzeichen an beiden Enden des Eingabeinhalts und wird validiert.

Code-Implementierung

	
	
	
	
	
	
	input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px; -webkit-transition: box-shadow .5s;margin-bottom: 15px;}
	input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef box-shadow: inset 0 1px 3px rgba(0,0,0, .05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
	input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}
	input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2 -webkit-transition: color .5s;}
	input[type=submit]{height: 30px; width: 80px; border:1px solid #fff;color: #fff;font:14px fater }
	
	
	
	

	Jahr
	Monat
	
	
	

	
	Funktion checkYear(obj) {
	if (!obj.value.match(/^d{4}$/)) {
	obj.style.borderColor = 'red';
	result.innerHTML = 'Eingabefehler, das Jahr wird durch 4 Ziffern dargestellt';
	return false;
	}
	result.innerHTML = '';
	return true;
	}
	Funktion checkMonth(obj) {
	if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
	obj.style.borderColor = 'red';
	result.innerHTML = 'Eingabefehler, Monat liegt zwischen 1 und 12';
	return false;
	}
	result.innerHTML = '';
	return true;
	}
	var form = document.getElementById('form'); // 
 element object var result = document.getElementById('result'); // 
 element object var inputs = document.getElementsByTagName('input'); //  Elementsammlung form.onsubmit = function() {
	return checkYear(inputs.year) && checkMonth(inputs.month);
	};
	inputs.year.onfocus = function() {
	this.style.borderColor = '';
	};
	inputs.month.onfocus = function() {
	this.style.borderColor = '';
	};
	if (!String.prototype.trim) {
	String.prototype.trim = function() {
	return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
	// uFEFF Bytereihenfolgemarkierung; xA0 umschließt kein Leerzeichen };
	}
	inputs.year.onblur = function() {
	this.value = this.value.trim();
	checkYear(this);
	};
	inputs.month.onblur = function() {
	this.value = this.value.trim();
	checkMonth(this);
	};
	
	
	

Methode test() in der RegExp-Klasse

: Erkennt, ob der reguläre Ausdruck mit der angegebenen Zeichenfolge übereinstimmt.

Wenn die Übereinstimmung erfolgreich ist, ist der Rückgabewert der test()-Methode „true“, andernfalls gibt sie „false“ zurück.

Mustermodifikatoren regulärer Objekte erkennen

Es gibt auch einige Eigenschaften in der RegExp-Klasse, die verwendet werden, um die vom aktuellen regulären Objekt verwendeten Mustermodifikatoren zu erkennen und den Startindex der nächsten Übereinstimmung anzugeben.

Damit die Leser die Verwendung dieser Attribute besser verstehen, wird im Folgenden die Zuordnung von Leerzeichen als Beispiel zur Demonstration verwendet.

Die Methode search() in der String-Klasse

kann die Position zurückgeben, an der der Teilstring des angegebenen Musters zum ersten Mal in der Zeichenfolge erscheint. Sie ist leistungsfähiger als die Methode indexOf().

• Der Parameter der search()-Methode ist ein reguläres Ausdrucksobjekt. Wenn ein nicht reguläres Ausdrucksobjekt übergeben wird, wird es implizit mit „new RegExp (übergebener Parameter)“ in ein reguläres Ausdrucksobjekt konvertiert.
• Der Rückgabewert der Methode search() nach einem fehlgeschlagenen Match ist -1.

Methode „split()“ : Wird verwendet, um einen String basierend auf dem angegebenen Trennzeichen in ein String-Array aufzuteilen. Das geteilte String-Array enthält kein Trennzeichen.

Wenn mehr als ein Trennzeichen vorhanden ist, muss ein reguläres Objekt definiert werden, um den String-Aufteilungsvorgang abzuschließen.

• Teilen Sie entsprechend den Trennzeichen „@“ und „.“ in der Zeichenfolge auf.
• Der Parameter der Methode split () ist das vom regulären Ausdrucksmodus festgelegte Trennzeichen, und der Rückgabewert ist das in Form eines Arrays gespeicherte Teilungsergebnis.

Beachten Sie, dass

die Methode split() ein Array „[“]“ ​​zurückgibt, das eine leere Zeichenfolge enthält. Wenn die Zeichenfolge und das Trennzeichen beide leere Zeichenfolgen sind, wird ein leeres Array „[] zurückgegeben.

• Wenn Sie zum Teilen einer Zeichenfolge den regulären Abgleich verwenden, können Sie auch die Anzahl der Zeichenfolgenteilungen angeben.
• Wenn nach der Angabe der Anzahl der Zeichenfolgenaufteilungen die angegebene Anzahl kleiner ist als die Anzahl der Aufteilungen, die den Regeln in der tatsächlichen Zeichenfolge entsprechen, werden andere Aufteilungsergebnisse im endgültigen Rückgabeergebnis ignoriert.

Praktische

Überprüfung der Passwortstärke

Bedingungen für die Überprüfung der Passwortstärke:

① Länge <6 Ziffern, keine Passwortstärke.

②Die Länge beträgt >6 Zeichen und enthält Zahlen, Buchstaben oder andere Zeichen, und die Passwortstärke ist „niedrig“.

③Die Länge beträgt >6 Zeichen und enthält zwei Arten von Zahlen, Buchstaben oder anderen Zeichen. Die Passwortstärke ist „mittel“.

④ Wenn die Länge >6 Zeichen beträgt und drei oder mehr Arten von Zahlen, Buchstaben oder anderen Zeichen enthält, ist die Passwortstärke „Hoch“.

Zeichenqualifizierer

Zeichenqualifizierer – Der Qualifizierer

stellt eine Frage: Entspricht einem aufeinanderfolgenden Zeichen, z. B. 6 aufeinanderfolgenden Ziffern „458925“.

Lösung 1: Reguläres Objekt/dddddd/gi.

Probleme: Das wiederholte „d“ ist nicht leicht zu lesen und umständlich zu schreiben.

Lösung 2: Verwenden Sie Qualifizierer (?, +, *, {}), um den Abgleich aufeinanderfolgender Vorkommen eines bestimmten Zeichens abzuschließen. Reguläres Objekt/d{6}/gi.

Zeichenqualifizierung – Greedy- und Lazy-Matching

Wenn das Punktzeichen (.) mit dem Qualifizierer verwendet wird, kann es mit jedem Zeichen im angegebenen Zahlenbereich übereinstimmen.

• Beispiel: „^hello.*world$“.
• Beschreibung: Kann mit Zeichenfolgen übereinstimmen, die mit „hello“ beginnen und mit „world“ enden und dazwischen null oder mehr beliebige Zeichen enthalten.

Der reguläre Ausdruck unterstützt Greedy Matching und Lazy Matching, wenn ein beliebiges Zeichen innerhalb eines angegebenen Bereichs gefunden wird.

• Beim sogenannten Greedy geht es darum, so viele Zeichen wie möglich zu finden, während Lazy bedeutet, so wenig Zeichen wie möglich zu finden. Standardmäßig wird Greedy Matching verwendet.
• Wenn Sie Lazy Matching erreichen möchten, müssen Sie nach dem vorherigen Qualifikationsmerkmal das Symbol „?“ hinzufügen.

Klammerzeichen

In regulären Ausdrücken wird der von den Klammerzeichen „()“ eingeschlossene Inhalt als „Unterausdruck“ bezeichnet.

Wirkung

Klammern implementieren den Abgleich von Catch und Cater, und wenn keine Klammern verwendet werden, wird es zu Catch und Er.

Wenn nicht gruppiert, bedeutet dies, dass zwei c-Zeichen übereinstimmen. Nach der Gruppierung bedeutet dies, dass zwei „bc“-Zeichenfolgen übereinstimmen.

Erfassende und nicht erfassende

Erfassung: Der Prozess des Speicherns des mit einem Unterausdruck übereinstimmenden Inhalts im Cache-Bereich des Systems.

Nicht erfassen: Speichern Sie den übereinstimmenden Inhalt des Unterausdrucks nicht im Systemcache. Verwenden Sie dazu (?:x).

Die Methode replace () des String-Objekts kann $n (n ist eine positive Ganzzahl größer als 0) direkt verwenden, um den erfassten Inhalt abzurufen und den Vorgang des Ersetzens des durch den Unterausdruck erfassten Inhalts abzuschließen.

• Der erste Parameter ist ein regulärer Ausdruck, der zum Abgleichen der Zeichenfolge str und zum Ersetzen des regelkonformen Inhalts durch den durch den zweiten Parameter festgelegten Inhalt verwendet wird.
• $2 stellt den Inhalt „Capture“ dar, der vom zweiten Unterausdruck im regulären Ausdruck reg erfasst wird.
• $1 stellt den Inhalt „Regular“ dar, der vom ersten Unterausdruck erfasst wird.
• Der Rückgabewert ist die neue Zeichenfolge nach dem Ersetzen, sodass der Inhalt der ursprünglichen Zeichenfolge nicht geändert wird.

Sie können „(?:x)“ verwenden, um einen nicht erfassenden Abgleich zu erreichen

Wenn Sie beim Schreiben eines regulären Ausdrucks den erfassten Inhalt des im Cache-Bereich gespeicherten Unterausdrucks erhalten möchten, können Sie „n“ verwenden (n ist eine positive Ganzzahl größer als 0)

.

Prozess ist „Reverse-Referenz“.

• „1“ stellt den erfassten Inhalt des ersten Unterausdrucks dar.
• „2“ stellt den erfassten Inhalt des zweiten Unterausdrucks dar und so weiter.

• „d“ wird verwendet, um eine beliebige Zahl zwischen 0 und 9 abzugleichen.
• Nach dem Hinzufügen von Klammern „()“ kann der erfasste Inhalt über die Rückreferenz abgerufen werden.
• Daher sind die endgültigen Übereinstimmungsergebnisse 333 und 666.

Behauptung mit der Breite Null

Behauptung mit einer Breite von Null : Bezieht sich auf einen Unterausdrucksabgleich mit einer Breite von Null und wird verwendet, um herauszufinden, ob der mit dem Unterausdruck übereinstimmende Inhalt einen bestimmten Zeichensatz davor oder danach enthält.

Klassifizierung: Unterteilt in Forward-Prefetch und Reverse-Prefetch, aber in JavaScript wird nur Forward-Prefetch unterstützt, d.

Vorrang regulärer Operatoren

Es gibt viele Operatoren in regulären Ausdrücken. In der tatsächlichen Anwendung werden verschiedene Operatoren entsprechend der Rangfolge abgeglichen. Die Rangfolge häufig verwendeter Operatoren in regulären Ausdrücken ist in der Reihenfolge von hoch nach niedrig wie folgt.

[Fall] ​​Suche und Ersetzung von Inhalten

Code-Implementierungsidee :

• Schreiben Sie HTML und definieren Sie zwei Textfelder, eines für Benutzereingaben und das andere für die Anzeige gefilterter Inhalte, die bei Bedarf ersetzt werden.
• Solange die Benutzereingabe fehlerhafte und chinesische Zeichen enthält, verwenden Sie *, um sie zu ersetzen.
• Regel zum Suchen und Ersetzen von Inhalten: /(bad)|[u4e00-u9fa5]/gi.

Code-Implementierung

	
	
	
	
	
	
	p{float:left;}
	Eingabe{margin:0 20px;}
	
	
	
	
Inhalt vor dem Filtern:

	
	
	
	
Gefilterter Inhalt:

	
	
	
	document.getElementById('btn').onclick = function () {
	// Definieren Sie die Inhaltsregeln, die durchsucht und ersetzt werden müssen, um alle chinesischen Zeichen abzugleichen. var reg = /(bad)|[u4e00-u9fa5]/gi;
	var str = document.getElementById('pre').value;
	var newstr = str.replace(reg, '*');
	document.getElementById('res').innerHTML = newstr;
	};
	
	
	

Verwandte Empfehlungen: JavaScript-Lern-Tutorial

. Für weitere Informationen lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website.