HTML 파일을 빠르게 처리하여 텍스트 콘텐츠를 추출하고 표준화된 국제화 JSON 리소스 파일을 생성하여 다국어 웹사이트 개발을 간소화합니다.
<div class="header">
<h1>Welcome</h1>
<p>Sample text</p>
<button>Start</button>
</div>{
"header.title": "Welcome",
"header.description": "Sample text",
"header.button": "Start"
}두 가지 강력한 흐름: HTML에서 텍스트를 JSON으로 추출하고, 키가 지정된 템플릿과 JSON을 사용하여 원본 HTML 복원
강력한 HTML 파싱 기능으로 다양한 태그에서 텍스트 콘텐츠를 정확히 식별 및 추출하며 스크립트와 스타일 코드를 자동으로 필터링합니다.
키-값 매핑과 중첩 구조를 가진 i18n 표준 JSON 리소스 파일을 자동 생성하여 직접 통합 가능
번역 JSON과 t(...) 키가 지정된 HTML을 제공하여 템플릿을 변경하지 않고 원본 HTML을 재구성하고 텍스트를 복구합니다.
우리 도구가 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>{
"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"
}추출 후, 인기 있는 i18n 라이브러리와 JSON 파일을 쉽게 통합할 수 있습니다:
// 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>
)
}