javascript - attribute - title html css

Etiquetas HTML en i18siguiente traducción

Question

Estoy usando i18next para encender i18n para mi weblog. Funciona muy bien en el contenido de solo texto, pero cuando trato de traducir contenido que incluye marcado HTML, está mostrando el marcado sin formato cuando traduzco el texto.

A modo de ejemplo, aquí hay un fragmento del marcado de una publicación que no funciona como se esperaba:

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

El código de traducción se ve así:

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

Cuando se traduce la traducción, las etiquetas HTML se escapan y se envían como texto:

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

¿Cómo obtengo i18siguiente para cambiar el HTML de los elementos traducidos?

Answer 1

¡Para cualquiera que intente hacer esto en React (por ejemplo, con react-i18-next ), tenga en cuenta que React también escapa de la cadena! Así que tenemos que decirle tanto a i18n como a Reaccionar para que eviten escapar.

Para decirle a React que no escape a la cadena, debemos usar el atributo fely dangerouslySetInnerHTML React:

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

¡Lo siento por eso!

Answer 2

De la documentation :

Pista 3: Escape:

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

Agregar el sufijo ''HTML__'' a su valor evitará que se escape incluso si la opción está configurada.

Puede activar el escape en init i18n.init({escapeInterpolation: true}); o pasando la opción a la función t como en la muestra.

Answer 3

Para que esto funcione, debe prefijar el atributo data-i18n de los elementos que desea traducir con [html] :

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

Fuente: i18next.jquery.js

Answer 4

Tienes que apagar el escape:

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

Answer 5

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

trabaja para mí si fecha = ''15 / 10/2020 '', barras guardadas también