i18next translation being displayed as unicode hex character

Question

I'm using i18next to handle translations in a project I'm working on and I'm finding that when I hand a string to the translation that contains /, it is being converted to the unicode hex code /

I am setting title as:

const title = '2/Double/Twin/Triple/Quadrupple'

The translation is called as follows:

{i18n.t('foo', {
  title,
  amount: '$18'
})}

And the translation is setup like:

{
  "foo": "foo bar {{title}} howdee {{amount}}"
}

However the output is:

Foo bar 2&#x2F;Double&#x2F;Twin&#x2F;Triple&#x2F;Quadrupple howdee $18

How do I ensure that characters are not converted to their hex code equivalents?

score 19 · Accepted Answer · answered Jul 17 '17 at 19:00

19

By default i18next escapes content to avoid xss attacks based on user input. You can turn off escaping by prepending - or provide escape flag.

{
  "foo": "foo bar {{- title}} howdee {{amount}}"
}

or

{i18n.t('foo', {
  title,
  amount: '$18',
  interpolation: { escapeValue: false }
})}

https://www.i18next.com/interpolation.html#unescape

answered Jul 17 '17 at 19:00

jamuhl

4,352
2
25
31

Excellent. I couldn't find this in the documentation. Thanks for the heads up. – oldo.nicho Jul 17 '17 at 22:43
1

Four years later, and you just saved me hours of debugging, thanks :) – Christoph Blüm Dec 31 '21 at 09:23
this is the updated docs link: https://www.i18next.com/translation-function/interpolation – e-shfiyut Jun 22 '22 at 17:29

i18next translation being displayed as unicode hex character

1 Answers1