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/Double/Twin/Triple/Quadrupple howdee $18

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

Answer 1

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