So starten Sie schnell mit VUE3.0: Einstieg ins Lernen
Verwandte Empfehlungen: JavaScript-Tutorial
regulärer Ausdruck ( Regulärer Ausdruck, auch als Regexp bezeichnet )
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
Während der Entwicklung ist es häufig erforderlich, bestimmte Zeichenfolgen anhand regulärer Übereinstimmungsmuster zu suchen und abzugleichen.
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.
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.
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.
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.
Vorteile: 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.
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
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Eingabeinhalt begrenzen</title>
<Stil>
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 }
</style>
</head>
<Körper>
<form id="form">
Jahr<input type="text" name="year">
Monat<input type="text" name="month">
<input type="submit" value="query">
</form>
<p id="result"></p>
<Skript>
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'); // <form> element object var result = document.getElementById('result'); // <p> element object var inputs = document.getElementsByTagName('input'); // <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);
};
</script>
</body>
</html> Die : 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.
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().
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.
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.
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“.
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.
Wenn das Punktzeichen (.) mit dem Qualifizierer verwendet wird, kann es mit jedem Zeichen im angegebenen Zahlenbereich übereinstimmen.
Der reguläre Ausdruck unterstützt Greedy Matching und Lazy Matching, wenn ein beliebiges Zeichen innerhalb eines angegebenen Bereichs gefunden wird.
In regulären Ausdrücken wird der von den Klammerzeichen „()“ eingeschlossene Inhalt als „Unterausdruck“ bezeichnet.
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.
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.
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“.
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.
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 :
Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Inhaltssuche und -ersetzung</title>
<Stil>
p{float:left;}
Eingabe{margin:0 20px;}
</style>
</head>
<Körper>
<p>Inhalt vor dem Filtern:<br>
<textarea id="pre" rows="10" cols="40"></textarea>
<input id="btn" type="button" value="filter">
</p>
<p>Gefilterter Inhalt:<br>
<textarea id="res" rows="10" cols="40"></textarea>
</p>
<Skript>
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;
};
</script>
</body>
</html> Verwandte Empfehlungen: JavaScript-Lern-Tutorial
. Für weitere Informationen lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website.
