Hier klicken, um JSX zu bearbeiten... oder

Text in JSX extrahieren und ersetzen

Experimentell: Dies könnte nicht alle Fälle gut behandeln.

Es ist hauptsächlich geeignet, um Text aus JSX-Komponenten zu extrahieren, die statischen Text enthalten. Wenn der Textinhalt dynamisch ist (mit geschweiften Klammern {}), wird er möglicherweise nicht korrekt verarbeitet.

Dieses Tool konzentriert sich darauf, Text innerhalb von JSX-Tags zu extrahieren und ein Array aus diesen extrahierten Zeichenfolgen zu generieren. Anschließend ermöglicht es Ihnen, den aktuellen Text im JSX durch die Zeichenfolgen aus diesem Array zu ersetzen.

Sie können diese Funktionalität bequem für eine Vielzahl von Anwendungen nutzen, einschließlich UI/UX-Tests, Unterstützung mehrerer Sprachen und Lokalisierung, Optimierung für SEO, Durchführung von Barrierefreiheitsprüfungen und Erstellung von Dokumentationen oder Kommentaren für Ihren Code.

Anwendungsfälle

UI / UX-Tests
Mehrsprachige Unterstützung und Lokalisierung
Content-Management-Systeme (CMS)
SEO-Optimierung
Barrierefreiheitsprüfungen
Dokumentation / Code-Kommentargenerierung

Gebrauchsanweisung

Bitte geben Sie das JSX-Tag ein, das die Zeichenfolgen enthält, die Sie extrahieren möchten, im Eingabefeld.
Klicken Sie auf die Schaltfläche 'Extrahieren' am unteren Bildschirmrand.
- Sie können wählen, ob Sie nur extrahieren oder sowohl Extraktion als auch Ersetzung mit den Schaltflächen neben der Schaltfläche 'Extrahieren' durchführen möchten.
- Für die Option 'Extrahieren und Ersetzen' können Sie den Namen des Arrays angeben, das die ersetzten Texte im Eingabefeld am unteren Rand des Eingabebereichs speichern wird. Wenn Sie dieses Array in Ihrem Code aufrufen, verwenden Sie denselben Variablennamen, und es wird entsprechend ersetzt, einschließlich der geschweiften Klammern {}.
Überprüfen Sie das Ausgabefeld für das Array / JSX und kopieren Sie es nach Bedarf mit der Schaltfläche 'Kopieren' zur kostenlosen Verwendung.

Beispiel für die Verwendung

Input JSX Tag:

<div>
  <Button onClick={onPlayMovie}>
  Play Movie
  </Button>
  <Button onClick={onUploadImage}>
  Upload Image
  </Button>
</div>

Output Array Name:

array

Output Array:

["Play Movie", "Upload Image"]

Output JSX:

<div>
  <Button onClick={onPlayMovie}>
  {array[0]}
  </Button>
  <Button onClick={onUploadImage}>
  {array[1]}
  </Button>
</div>