web-dev-qa-db-ja.com

i18next翻訳のHTMLタグ

i18next を使用して、ウェブログのi18nを強化しています。テキストのみのコンテンツではうまく機能しますが、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 &lt;i&gt;jugos naturales&lt;/i&gt;...&lt;br /&gt;&lt;br /&gt;

翻訳された要素のHTMLを変更するためにi18nextを取得するにはどうすればよいですか？

javascriptinternationalizationi18next
35
user212218

これを機能させるには、翻訳する要素のdata-i18n属性の前に[html]を付ける必要があります。

<div class="i18n" data-i18n="[html]content.body">

ソース： i18next.jquery.js

41
user212218

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

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

13
Dotevo
i18n.t('key',{dateStr: date, interpolation: {escapeValue: false}})

date = '15/10/2020 'の場合、私のために働きます、スラッシュも保持されます

6
garbo

ドキュメント から：

ヒント3：エスケープ：

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

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

値に接尾辞「HTML__」を追加すると、オプションがそのように設定されている場合でもエスケープが防止されます。

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

6
borisdiakur

React（たとえばreact-i18-nextを使用）でこれを実行しようとする場合は、Reactalsoは文字列をエスケープします！したがって、文字列をエスケープしないようにbo18i18nとReactに指示する必要があります。

  • I18nにエスケープをスキップするように指示するには、他の人が示したように{escapeValue: false}を使用します。

  • Reactにエスケープをスキップさせるには、Reactの dangerouslySetInnerHTML 属性を使用します。

<div dangerouslySetInnerHTML={
    {__html: t('foo', {interpolation: {escapeValue: false}})}
} />

その属性は、1つのプロパティ__htmlを持つオブジェクトを受け入れます。 Reactは、使用しないように意図的にitいものにしました。エスケープしないことは危険です。

セキュリティのために、この要素内で生のユーザー入力を使用しないでください。ここにユーザー入力を表示する必要がある場合は、ユーザーの文字列をサニタイズまたはエスケープして、ユーザーが生の<または>をページに挿入できないようにしてください。

3
joeytwiddle