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>