home icon

ここをクリックしてJSXを編集... または

JSXにおけるテキストの抽出と置換

実験的：すべてのケースをうまく処理できない可能性があります。

主に静的テキストを含むJSXコンポーネントからテキストを抽出するのに適しています。テキストの内容が動的（中括弧{}を使用）である場合、正しく処理されない可能性があります。

このツールは、JSXタグ内に見つかったテキストを抽出し、抽出された文字列で構成された配列を生成することに焦点を当てています。その後、この配列の文字列でJSX内の現在のテキストを置き換えることができます。

この機能は、UI/UXテスト、多言語サポートとローカリゼーション、SEO最適化、アクセシビリティ評価の実施、コードのドキュメントやコメントの作成など、さまざまなアプリケーションに便利に使用できます。

使用例

  • UI / UXテスト
  • 多言語サポートとローカリゼーション
  • コンテンツ管理システム (CMS)
  • SEO最適化
  • アクセシビリティチェック
  • ドキュメント / コードコメント生成

使用手順

  1. 抽出したい文字列を含むJSXタグを入力フィールドに入力してください。
  2. 画面下部の抽出ボタンをクリックしてください。
    • 抽出のみを行うか、抽出と置換の両方を行うかを、抽出ボタンの隣のボタンオプションを使用して選択できます。
    • 抽出と置換のオプションでは、入力エリアの一番下の入力フィールドで置換されたテキストを保持する配列の名前を指定できます。この配列をコード内で呼び出す際は、同じ変数名を使用し、それに応じて置き換えられます（中括弧{}を含む）。
  3. 出力フィールドで配列 / JSXを確認し、必要に応じてコピー用ボタンを使用して無料でコピーしてください。

使用例

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>