Znaczniki HTML w i18następnym tłumaczeniu

Question

Używam i18next do zasilania i18n na moim blogu. Działa doskonale w przypadku treści tekstowych, ale gdy próbuję tłumaczyć treść zawierającą znaczniki HTML, wyświetla się surowy znacznik podczas tłumaczenia tekstu.

Jako przykład, o to fragment znaczników z postu, który nie działa zgodnie z oczekiwaniami:

kod

<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> 

Tłumaczenie wygląda następująco:

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(); 
}); 

Gdy tłumaczenie jest renderowane, znaczniki HTML są przekształcane i wyprowadzane w postaci tekstu:

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

Jak uzyskać i18następnie zmienić e HTML przetłumaczonych elementów?

Answer 1

W celu dokonania tej pracy, trzeba poprzedzić atrybut data-i18n z elementów, które chcesz przetłumaczyć z [html]:

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

Źródło: i18next.jquery.js

Answer 2

Z documentation:

Wskazówka 3: Escaping:

// 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> 

Dodanie przyrostka 'HTML__' do wartości uniemożliwi wybranie nawet wtedy, gdy ustawiona jest opcja .

Możesz włączyć funkcję escape na init i18n.init({escapeInterpolation: true}); lub przez przekazanie opcji t funkcji jak w przykładzie.

Answer 3

Trzeba wyłączyć ucieczki:

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

Answer 4

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

pracę dla mnie, jeśli date = '15/10/2020, ukośników trzymane jak dobrze