i18n文本替换工具

将代码中的硬编码文本替换为i18n翻译键

t函数模板：

JSON 数据

代码块

<!-- 示例代码 -->
<div class="panel-header">
  <span>订单信息</span>
</div>
<div class="order-details">
  <div class="detail">
    <label>订单日期:</label>
    <span>2023-10-01</span>
  </div>
  <div class="detail">
    <label>订单状态:</label>
    <span>已发货</span>
  </div>
</div>
<div class="user-info">
  <div class="name">名 姓</div>
  <div class="contact">邮箱: user@example.com</div>
</div>
<div class="product-list">
  <div class="product">
    <div class="product-name">产品名称</div>
    <div class="price">价格: $99.99</div>
    <div class="quantity">数量: 2</div>
  </div>
</div>
<button class="submit-button">提交订单</button>

使用说明

1. 设置t函数模板

在顶部输入框中设置您的i18n翻译函数调用模板，例如：t('order.xxx')。

工具使用xxx作为键名占位符，处理过程中会被实际键名替换。

2. 输入JSON键值对

在左侧编辑区输入包含翻译键和对应文本的JSON对象：

{ "order": { "id": "订单ID", "date": "订单日期", "status": "订单状态" }, "user": { "first_name": "名", "last_name": "姓" } }

JSON结构支持嵌套命名空间。

3. 输入HTML/代码

在右侧编辑区输入需要替换文本的HTML或其他代码：

<div class="panel-header"> <span>订单信息</span> </div> ... <button>提交订单</button>

4. 执行替换

点击"替换文本键"按钮后，工具会：

提取JSON中的所有文本值
在代码中查找这些文本值
用对应的t函数调用替换文本（如t('order.id'))
更新顶部输入框中的占位符（如t('order.id'))

替换前: <span>订单日期</span>
替换后: <span>{{ t('order.date') }}</span>