i18next を使用して、ウェブログのi18nを強化しています。テキストのみのコンテンツではうまく機能しますが、HTMLマークアップを含むコンテンツを翻訳しようとすると、テキストを翻訳するときに生のマークアップが表示されます。
例として、期待どおりに機能しない投稿のマークアップのスニペットを次に示します。
<div class="i18n" data-i18n="content.body">
In Medellín they have many different types of <i>jugos naturales</i> (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 />
翻訳された要素のHTMLを変更するためにi18nextを取得するにはどうすればよいですか?
これを機能させるには、翻訳する要素のdata-i18n
属性の前に[html]
を付ける必要があります。
<div class="i18n" data-i18n="[html]content.body">
ソース: i18next.jquery.js
エスケープをオフにする必要があります。
i18n.t("key", { 'interpolation': {'escapeValue': false} })
i18n.t('key',{dateStr: date, interpolation: {escapeValue: false}})
date = '15/10/2020 'の場合、私のために働きます、スラッシュも保持されます
ドキュメント から:
ヒント3:エスケープ:
_// given resources { 'en-US': { translation: { key1: Not escaped __nameHTML__, key2: Escaped __ } } }; i18n.t("key2", { name: '', escapeInterpolation: true }); // -> Escaped <tag> i18n.t("key1", { name: '', escapeInterpolation: false }); // -> Not escaped <tag>
_値に接尾辞「HTML__」を追加すると、オプションがそのように設定されている場合でもエスケープが防止されます。
Init
i18n.init({escapeInterpolation: true});
のエスケープをオンにするか、サンプルのようにt関数にオプションを渡すことでオンにすることができます。
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いものにしました。エスケープしないことは危険です。
セキュリティのために、この要素内で生のユーザー入力を使用しないでください。ここにユーザー入力を表示する必要がある場合は、ユーザーの文字列をサニタイズまたはエスケープして、ユーザーが生の<
または>
をページに挿入できないようにしてください。