Die JS-String-Replace()-Methode

Einführung

Die String-Replace()-Methode wird in der Regel von Javascript-Studenten zu Beginn ihres Studiums erlernt, zu diesem Zeitpunkt wird jedoch nur die grundlegende Form der Verwendung behandelt, und das Thema wird später normalerweise nicht noch einmal behandelt. Aus diesem Grund verwenden viele Javascript-Entwickler es nur in seiner einfachsten Form.

Basisnutzung

Die grundlegende Verwendung von replace() umfasst die Übergabe von zwei Zeichenfolgen. Die erste ist die Zeichenfolge, die ersetzt wird, und die zweite ist die Zeichenfolge, die zum Ersetzen verwendet wird.

const strOriginal = "The quick brown fox jumps over the lazy dog.";
const strReplaced = strOriginal.replace("jumps", "flies");
console.log(strReplaced);

Das erzeugt diese Ausgabe:

The quick brown fox flies over the lazy dog.

Reguläre Ausdrücke

Anstatt einen String als ersten Parameter für replace() anzugeben, ist es auch möglich, einen regulären Ausdruck anzugeben.

const strOriginal = "The PIN is 1234."
const strReplaced = strOriginal.replace(/\b\d{4}\b/, "<redacted>");
console.log(strReplaced);//The PIN is <redacted>.

Das d entspricht einer Ziffer und das {4} entspricht genau 4 davon. Das b am Anfang und am Ende stimmt mit den Grenzen überein. Dies verhindert, dass Teile von Zahlen übereinstimmen, die länger als 4 Ziffern sind. Im realen Einsatz benötigen Sie möglicherweise zusätzlichen Code, um die 4-stellige Folge von einem Teil einer Telefonnummer oder Kreditkartennummer zu unterscheiden, aber ich habe das weggelassen, da dies nicht als Regex-Tutorial gedacht ist.

Ersetzungsfunktion

Der zweite Parameter der Methode replace() kann eine Funktion sein. Was auch immer diese Funktion zurückgibt, wird verwendet, um den im ersten Parameter angegebenen übereinstimmenden Text zu ersetzen. Dies funktioniert sowohl mit Zeichenfolgen als auch mit regulären Ausdrücken, die als erster Parameter bereitgestellt werden.

Wenn der erste Parameter von replace() ein String oder ein regulärer Ausdruck ohne Capture-Gruppen ist, werden der Ersetzungsfunktion 3 Parameter in der folgenden Reihenfolge übergeben:

1. übereinstimmender Text
2. Position der Übereinstimmung
3. ursprüngliche vollständige Zeichenfolge

Wenn der erste Parameter von replace() ein regulärer Ausdruck mit Capture-Gruppen ist, sind der zweite und alle nachfolgenden Parameter, außer den letzten beiden, die Captures. Der vorletzte Parameter ist die Position der ersten Erfassung und der letzte Parameter ist die ursprüngliche vollständige Zeichenfolge.

Wenn ein regulärer Ausdruck mit dem globalen Flag verwendet wird, wird die Funktion einmal für jede gefundene Übereinstimmung aufgerufen.

Die Ersetzungsfunktion wird seltener von einer Zeichenfolge als erstem Parameter von replace() begleitet, da eine Zeichenfolge ein konstanter Wert ist und es daher im Allgemeinen möglich ist, den Ersatz dafür vorab zu berechnen. Es kann jedoch mit einer Zeichenfolge verwendet werden, um etwa Folgendes zu tun:

const names = ["birds", "dogs", "cats", "pandas"];
const str = "We hold these truths to be self-evident, that all <ANIMALS> are created equal."
const strReplaced = str.replace("<ANIMALS>",
    ()=> names[Math.floor(Math.random() * names.length)]
);
console.log(strReplaced);

Dies ersetzt „“ mit einer zufällig ausgewählten Zeichenfolge aus dem Namensarray, um einen zufälligen Satz wie diesen zu erzeugen:

We hold these truths to be self-evident, that all dogs are created equal.

Kombinieren von RegEx mit der Ersetzungsfunktion

Die wahre Stärke der Ersetzungsfunktion liegt in der Kombination mit einem regulären Ausdruck als erstem Parameter von replace(). Da Regex mit Mustern übereinstimmen kann, kann es auch mit Zeichenfolgen übereinstimmen, die nicht im Voraus bekannt sind. Daher ist möglicherweise eine Funktion erforderlich, um den übereinstimmenden Text zu verarbeiten und seinen Ersatz zu erzeugen.

Hier ist ein Beispiel für die Umwandlung einer Schlangenhülle in eine Kamelhülle:

const snakeStr = "my_favorite_variable_name";
function snakeToCamelCase(str) {
    return str.replace(/_(\w)/g, function(_, letter) {
        return letter.toUpperCase();
    });
}
console.log(snakeToCamelCase(snakeStr)); //myFavoriteVariableName

Das w entspricht einem einzelnen Textzeichen. Es steht nach einem Unterstrich im regulären Ausdruck und entspricht daher dem ersten Buchstaben nach einem Unterstrich. Mithilfe von Klammern wird eine Erfassungsgruppe erstellt, die nur diesen Buchstaben ohne den Unterstrich als Teil der Zeichenfolge enthält. (Es wäre einfach, einfach das zweite Zeichen der Übereinstimmung zu nehmen, aber ich wollte Erfassungsgruppen veranschaulichen.) Dieser Buchstabe wird von der Ersetzungsfunktion als zweiter Parameter empfangen, dann großgeschrieben und zurückgegeben als Ersatz für die gesamte Teilzeichenfolge, die ursprünglich aus Unterstrich und Buchstaben bestand, sodass der Unterstrich gelöscht und der darauf folgende Buchstabe großgeschrieben wird.

Hier ist ein weiteres Beispiel, das Hex-Farbcodes in RGB-Farben konvertiert.

const css = `body{
    background-color: #88FF00;
    color: #0d2651;
}`;
const hex2RGB = str => str.replace(/#[0-9A-F]{6}/ig,(hex)=>{
    return "rgb(" +
        //skip first character which is #
        parseInt(hex.substring(1,3), 16) +
        ", " +
        parseInt(hex.substring(3,5), 16) +
        ", " +
        parseInt(hex.substring(5,7), 16) +
        ")";
});
console.log(hex2RGB(css));

Die resultierende Ausgabe ist:

body{
    background-color: rgb(136, 255, 0);
    color: rgb(13, 38, 81);
}

Der reguläre Ausdruck entspricht dem #, gefolgt von genau 6 hexadezimalen Ziffern, die als Zeichen 0 bis 9 und A bis F definiert sind. Das i-Flag wird verwendet, um die Groß- und Kleinschreibung zu ignorieren, sodass es sowohl für Groß- als auch für Kleinbuchstaben funktioniert. Die Ersetzungsfunktion nimmt Teilzeichenfolgen aus dem Hex-Code und analysiert sie, um Dezimalzahlen zu erzeugen. Diese Zahlen werden zwischen „rgb(“ und „)“ platziert, um die rgb()-Farben zu erzeugen.

Abschluss

Es gibt viele Möglichkeiten, eine vorhandene Zeichenfolge zu ändern, aber die Verwendung der Methode „replace()“ ist oft eine gute Wahl, wenn das Ziel darin besteht, Teilzeichenfolgen basierend auf dem Inhalt statt auf der Position zu ersetzen. Ohne sie besteht die typische Lösung darin, zunächst die Position eines Teilstrings zu suchen, dann den String an dieser Stelle zu teilen und mit einem Ersatz zu verketten, und das ist nicht effizient.

Das obige ist der detaillierte Inhalt vonDie JS-String-Replace()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!