javascript - i18next 翻訳の HTML タグ

Question

私はウェブログの i18n をパワーアップするためにi18nextを使用しています。テキストのみのコンテンツではうまく機能しますが、HTML マークアップを含むコンテンツを翻訳しようとすると、テキストを翻訳すると生のマークアップが表示されます。

例として、期待どおりに機能しない投稿のマークアップのスニペットを次に示します。

<div class="i18n" data-i18n="content.body">
  In Medellín they have many different types of <i>jugos naturales</i>&nbsp;(fruit juice) ... <br />
  <br />
  ...
</div>

翻訳コードは次のようになります。

var resources = {
  "en": ...,
  "es": {
    "translation": {
      "content": {
        "body": "En Medellín hay varios tipos diferentes de <i>jugos naturales</i> ... <br /><br /> ... "
      }
    }
  }
}

i18n.init({"resStore": resources}, function( t ) {
  $('.i18n').i18n();
});

翻訳がレンダリングされると、HTML タグがエスケープされ、テキストとして出力されます。

En Medellín hay varios tipos diferentes de <i>jugos naturales</i>...<br /><br />

i18next で翻訳済み要素の HTML を変更するにはどうすればよいですか?

Answer 1

エスケープをオフにする必要があります。

i18n.t("key", { 'interpolation': {'escapeValue': false} })

Answer 2

翻訳に HTML タグを入れないでください。とにかくそれは悪い考えです。懸念の分離は、みんなそれについて不平を言うでしょう。

<Trans>コンポーネントを使用するなら、 react-i18next [https://react.i18next.com/latest/trans-component][1]

次のようにします。

// Component.js

<Trans>Welcome, <strong>User!</strong>, here's your <strong>broom</strong></Trans>

対応する翻訳ファイル:

// your locales/starwars_en.js file

translations: {
  "Welcome, <1>User!</1>, here's your <3>broom</3>": "Welcome, <1>young padawan!</1>, here's your <3>light saber</3>",
}

これらの数字<1>と<3>はランダムに表示されますが、それを待ちます。

Trans.children = [
  'Welcome, ',                        // index 0
  '<strong>User!</strong>'            // index 1
  ', please don't be ',               // index 2
  '<strong>weak</strong>',            // index 3
  ' unread messages. ',               // index 4
]

詳細はこちら: https://stackoverflow.com/a/62563302/537648

Answer 3

ドキュメントから：

ヒント 3: エスケープ:

// given resources
{           
  'en-US': { 
    translation: { 
      key1: Not escaped __nameHTML__,
      key2: Escaped __name__ 
    } 
  }
};

i18n.t("key2", { name: '', escapeInterpolation: true }); // -> Escaped <tag>
i18n.t("key1", { name: '', escapeInterpolation: false }); // -> Not escaped <tag>

値にサフィックス「HTML__」を追加すると、オプションが設定されていてもエスケープが防止されます。

init でエスケープを有効にするi18n.init({escapeInterpolation: true});か、サンプルのように t 関数にオプションを渡すことで有効にできます。

Answer 4

ReactJS での解決策:

初期成分:

...
<Typography>Hello <b>World</b><br />This is an <strong>example</strong></Typography>
...

React -i18nextで Interweaveを使用する

...
import { Markup } from "interweave"
...
<Typography><Markup content={t("paragraph")} /></Typography>
...

そしてあなたのen.jsonファイル：

{
 "paragraph": "Hello <b>World</b><br />This is an <strong>example</strong>"
}

es.json:

{
 "paragraph": "Hola <b>Mundo</b><br />Esto es un <strong>ejemplo</strong>"
}

詳細：こちら