Erfahren Sie mehr über die Verwendung regulärer Ausdrücke in JavaScript

1. Was ist ein regulärer Ausdruck

Ist ein Muster, das zum Abgleichen von Zeichenkombinationen in einer Zeichenfolge verwendet wird. In JavaScript sind reguläre Ausdrücke auch Objekte.

Reguläre Ausdrücke werden normalerweise verwendet, um Text abzurufen und zu ersetzen, der einem bestimmten Muster (Regel) entspricht, wie beispielsweise in einem Validierungsformular: In das Benutzernamenformular können nur englische Buchstaben, Zahlen oder Unterstriche eingegeben werden, während in das Spitznamen-Eingabefeld chinesische Zeichen eingegeben werden können (Übereinstimmung). Darüber hinaus werden reguläre Ausdrücke häufig verwendet, um bestimmte vertrauliche Wörter im Seiteninhalt herauszufiltern (Ersetzung) oder um den gewünschten bestimmten Teil aus der Zeichenfolge zu erhalten (Extraktion) usw.

1. Eigenschaften regulärer Ausdrücke

Flexibilität regulärer Ausdrücke.

Sehr logisch und funktional.

Auch die komplexe Steuerung von Saiten ist schnell und einfach realisierbar.

2. Verwendung regulärer Ausdrücke

1. Erstellen Sie einen regulären Ausdruck

Normalerweise gibt es zwei Möglichkeiten, es zu erstellen.

1) Erstellen durch Aufrufen des Konstruktors des RegExp-Objekts

var Variablenname = neuer RegExp(/Ausdruck/); 

2) Erstellen durch wörtliche

 var Variablenname = /Ausdruck/; 

// Das Einfügen eines Ausdrucks in die Mitte eines Kommentars ist ein regulärer Literalwert

2. Testen Sie reguläre Ausdrücke

test() Reguläre Ausdrucksobjektmethode, die verwendet wird, um zu erkennen, ob eine Zeichenfolge der Regel entspricht. Das Objekt gibt „true“ oder „false“ zurück und sein Parameter ist die Testzeichenfolge.

regexObj.test(str) 

In:

regexObj – zu schreibender regulärer Ausdruck

str — Der zu testende Text

Dies bedeutet, dass geprüft wird, ob der Str-Text der geschriebenen regulären Ausdrucksspezifikation entspricht.

Zum Beispiel:

Bestimmen Sie anhand des regulären Ausdrucks var rg = /123/ , ob die von uns eingegebene Zeichenfolge den Regeln entspricht.

var str = "123"
var reg1 = neuer RegExp(/123/);
var reg2 = /abc/;
console.log(reg1.test(str)); 
console.log(reg2.test(str));

Das Druckergebnis ist;

2. Sonderzeichen in regulären Ausdrücken

1. Zusammensetzung regulärer Ausdrücke

Ein regulärer Ausdruck kann aus einfachen Zeichen, wie etwa /abc/, oder einer Kombination aus einfachen und Sonderzeichen, wie etwa /ab*c/, bestehen. Sonderzeichen werden auch Metazeichen genannt. Dabei handelt es sich um spezielle Symbole mit besonderer Bedeutung in regulären Ausdrücken, beispielsweise ^, $, + usw.

2. Grenzzeichen

Die Begrenzungszeichen (Positionszeichen) in regulären Ausdrücken werden verwendet, um die Position von Zeichen anzugeben. Es gibt hauptsächlich zwei Zeichen.

Wenn ^ und $ zusammen vorkommen, bedeutet dies, dass eine exakte Übereinstimmung erfolgen muss.

3. Charakterklasse

Eine Zeichenklasse gibt an, dass ein Bereich an Zeichen zur Auswahl steht und Sie nur eines davon zuordnen müssen. Alle optionalen Zeichen sind in eckige Klammern eingeschlossen.

1. [] Eckige Klammern

/[abc]/.test('andy') // wahr 

Solange die nachfolgende Zeichenfolge ein beliebiges Zeichen in abc enthält, wird „true“ zurückgegeben.

2. [-] Bereichssymbol in eckigen Klammern -

/^[az]$/.test(c') // wahr

Das Hinzufügen von - in den eckigen Klammern gibt einen Bereich an. Hier bedeutet es, dass alle 26 englischen Buchstaben von A bis Z zulässig sind.

3. [^] Negationssymbol in eckigen Klammern ^

  /[^abc]/.test('andy') // falsch

Das Hinzufügen von ^ innerhalb der eckigen Klammern bedeutet eine Negation. Solange die Zeichen in den eckigen Klammern enthalten sind, wird false zurückgegeben.

Beachten Sie den Unterschied zwischen ^ und dem Begrenzungszeichen, das außerhalb der eckigen Klammern geschrieben wird.

4. Zeichenkombination

/[a-z1-9]/.test('andy') // wahr

Innerhalb der eckigen Klammern können Zeichenkombinationen verwendet werden, d.h. alle 26 englischen Buchstaben von a bis z und Zahlen von 1 bis 9 sind erlaubt.

4. Quantifizierer

Quantifizierer werden verwendet, um die Häufigkeit des Auftretens eines Musters festzulegen.

var reg = /^a*$/; // * entspricht >=0 und kann 0-mal oder mehrmals vorkommenvar reg = /^a+$/; // + entspricht >=1 und kann 1-mal oder mehrmals vorkommenvar reg = /^a?$/; // ? entspricht 1||0 und kann 0-mal oder 1-mal vorkommenvar reg = /^a{3}$/; // {3} bedeutet, dass der Buchstabe a 3-mal wiederholt wirdvar reg = /^a{3,}$/; // {3,} bedeutet, dass der Buchstabe a größer oder gleich 3-mal wiederholt wirdvar reg = /^a{3,16}$/; // {3,16} bedeutet, dass der Buchstabe a größer oder gleich 3-mal und kleiner oder gleich 16-mal wiederholt wird

Lassen Sie uns nun beispielsweise einen Fall zur Überprüfung eines Benutzernamens durchführen. Wenn die Eingabe des Benutzernamens zulässig ist, lautet die Eingabeaufforderung: „Der Benutzername ist zulässig“ und die Farbe ist grün. Wenn die Eingabe des Benutzernamens ungültig ist, lautet die Eingabeaufforderung: „Der Benutzername ist ungültig“ und die Farbe ist grün.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <script src="jquery.js"></script>
    <Stil>
        .Erfolg{
            Farbe: grün;
        }
        .falsch{
            Farbe: rot;
        }
    </Stil>
</Kopf>
<Text>
    Benutzername:
        <Eingabetyp="Text" Klasse="uname"><span></span>
    </Bezeichnung>
    <Skript>
       $(Funktion(){
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;
        $('.uname').bind('unscharf',function(){
            lass str = $(this).val();
            wenn($('input').val === null){
                $('span').removeClass();
            }
            wenn(reg.test(str)){
                wenn($('span').hasClass('falsch'))
               $('span').removeClass()
                $('span').html('Das Eingabeformat ist korrekt');
                $('span').addClass('Erfolg')
            }anders{
                $('span').html('Fehler im Eingabeformat');
                $('span').addClass('falsch')
            }
        })
       })

    </Skript>
</body>
</html>

Der Anzeigeeffekt ist:

5. Zusammenfassung in Klammern

Klammern dienen als Quantifikatoren. Sie geben die Anzahl der Wiederholungen an.

Der Satz von Klammern. Stimmt mit jedem Zeichen in den eckigen Klammern überein.

Die Klammern geben die Priorität an

6. Vordefinierte Klassen

Vordefinierte Klassen sind Abkürzungen für einige gängige Muster.

3. Methoden in der String-Klasse

1. match()-Methode

Methode match(): Gleicht alle Inhalte ab, die die Anforderungen gemäß dem regulären Ausdruck erfüllen, und speichert sie nach einem erfolgreichen Abgleich in einem Array. Wenn der Abgleich fehlschlägt, wird false zurückgegeben.

Zum Beispiel:

var str = "Das ist die Kurzform von "es ist";
var reg1 = /it/gi;
str.match(reg1); // Passendes Ergebnis: (2) ["Es", "es"]
var reg2 = /^it/gi;	
str.match(reg2); // Match-Ergebnis: ["Es"]
var reg3 = /s/gi;	
str.match(reg3); // Passende Ergebnisse: (4) ["s", "s", "s", "s"]
var reg4 = /s$/gi;
str.match(reg4); // Passendes Ergebnis: ["s"]

2. search()-Methode

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

Zum Beispiel:

var str = "123*abc.456";
console.log(str.search('.*')); // Ausgabe: 0
console.log(str.search(/[\.\*]/)); // Ausgabe: 3

3. split()-Methode

Methode split(): Die Methode split() wird verwendet, um einen String gemäß dem angegebenen Trennzeichen in ein String-Array aufzuteilen. Das aufgeteilte String-Array enthält das Trennzeichen nicht.

Zum Beispiel:

Die Zeichenfolge wird entsprechend den Trennzeichen "@" und "." aufgeteilt.

var str = "[email protected]";
var reg = /[@\.]/;
var split_res = str.split(reg);
console.log(split_res); // Ausgabe: (3) ["test", "123", "com"]

Beim Aufteilen einer Zeichenfolge mithilfe der regulären Ausdrucksübereinstimmung können Sie auch angeben, wie oft die Zeichenfolge aufgeteilt werden soll.

var str = 'Wir sind eine Familie';
var reg = /\s/;
var split_res = str.split(reg, 2);
console.log(split_res); // Ausgabe: (2) ["Wir", "sind"]

4. replace()-Methode

replace()-Methode: Die replace()-Methode wird verwendet, um eine Zeichenfolge zu ersetzen. Der für die Operation verwendete Parameter kann eine Zeichenfolge oder ein regulärer Ausdruck sein.

Beispiel: Schreiben Sie einen Fall zum Suchen und Ersetzen sensibler Wörter (Filtern chinesischer Schriftzeichen und des Wortes „schlecht“):

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<body style="Anzeige:flex">
    <div>
        <p>Inhalt vor dem Filtern</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button id = 'btn'>Filter</button>
    </div>
    <div>
        <p>Gefilterter Inhalt</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <Skript>
        var text = document.querySelectorAll('Textbereich');
        konsole.log(text);
        var btn = document.querySelector('Schaltfläche');
        btn.onclick = Funktion() {
            text[1].Wert = text[0].Wert.replace(/(schlecht)|[\u4e00-\u9fa5]/gi, '*');
        }
    </Skript>
</body>
</html>

Der laufende Effekt ist:

Das Obige ist der detaillierte Inhalt eines vertieften Verständnisses der Verwendung von regulären Ausdrücken in JavaScript. Weitere Informationen zu regulären Ausdrücken in JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!