开发者工具

i18n提取工具

快速处理HTML文件以提取文本内容并生成标准化的国际化JSON资源文件，简化多语言网站开发。

index.html

<div class="header">
  <h1>Welcome</h1>
  <p>Sample text</p>
  <button>Start</button>
</div>

en.json

{
  "header.title": "Welcome",
  "header.description": "Sample text",
  "header.button": "Start"
}

核心功能

核心能力

两个强大的流程：从HTML中提取文案到JSON，以及使用JSON从带键的模板还原原始HTML

HTML解析

强大的HTML解析能力，能准确识别和提取各种标签中的文本内容，同时自动过滤脚本和样式代码

标准JSON输出

自动生成i18n标准的JSON资源文件，包含键值映射和嵌套结构，便于直接集成

HTML还原

提供翻译JSON和带t(...)键的HTML，以重建原始HTML并恢复文案，无需更改您的模板

简单流程

三个简单步骤

我们简化了HTML国际化流程，只需几分钟即可完成整个工作流

上传HTML文件

选择或拖放您的HTML文件进行处理。支持多文件批量处理。

配置提取选项

设置提取规则、前缀和排除项，以根据特定需求自定义输出结构。

导出JSON文件

生成并下载JSON格式的国际化资源文件，可立即集成到您的项目中。

开始提取尝试还原

示例

实际演示

体验我们的工具如何将HTML内容转换为结构化的国际化资源

输入：HTML文件source.html

<div class="header">
  <h1>Welcome to our service</h1>
  <p>This is a sample text to demonstrate i18n extraction.</p>
  <button title="Click to continue">Get Started</button>
</div>

输出：JSON文件translations.json

{
  "header.title": "Welcome to our service",
  "header.description": "This is a sample text to demonstrate i18n extraction.",
  "header.button.text": "Get Started",
  "header.button.title": "Click to continue"
}

集成示例

提取后，您可以轻松地将JSON文件与流行的i18n库集成：

// React + i18next (example)
import i18n from 'i18next'
import { useTranslation } from 'react-i18next'
import translations from './translations.json'

i18n.init({ resources: { en: { translation: translations } } })

function Header() {
  const { t } = useTranslation()
  return (
    <div className="header">
      <h1>{t('header.title')}</h1>
      <p>{t('header.description')}</p>
      <button title={t('header.button.title')}>{t('header.button.text')}</button>
    </div>
  )
}

准备好国际化了么？

立即开始从您的HTML文件中提取国际化资源，并简化您的多语言开发

立即开始使用