Replace HTML tags tokens from translation

[AlexandrTsvetkov]

🚀 Feature Proposal

Implement Trans react component functionality for jquery

Let's assume that in translation I do have text like:
"userMessagesUnread": "Hello <1>{{name}}</1>, you have {{count}} unread message."

It would be nice if on client side code I can define by myself what kind of HTML tags I want to use for <1></1>
So, usage will be:

<p data-i18n="userMessagesUnread">
  Hello <strong>{{name}}</strong>, you have {{count}} unread message
</p>

Motivation

Using separation of concerns principle we don't need to store HTML tags directly in translations

[jamuhl]

https://github.com/i18next/jquery-i18next#set-innerhtml-attributes does already what you ask for

[AlexandrTsvetkov]

@jamuhl Thanks for answer.
What do you think about adding additional information to docs with examples how to use it?

[jamuhl]

feel free to provide a PR improving the docs...(technically it's nothing else then setting innerHtml on an html element)

[AlexandrTsvetkov]

@jamuhl Yes, sure. Wanted to ask one more thing. Maybe I am doing something wrong, but as an output I got this html code

<p data-i18n="[html]userMessagesUnread">
Hello &lt;1&gt;Name<!--1-->, you have {{count}} unread message.
</p>

Which looks like in the browser:

Could you please advise me? Thanks!

[adrai]

Here you have an example:

jquery-i18next/example/simple/sample.html

Line 19 in 9fe8b48

<p data-i18n="[html]userMessagesUnread" data-i18n-options='{ "name": "John", "count": 3 }'>

[AlexandrTsvetkov]

@adrai Thanks for providing link.
Unfortunately, in this example we use concrete tag <strong> directly in translation
What I wanted to achieve in to put in translation <1> tag as a placeholder and later define it in html code as I mentioned in the first post. Same as <Trans> component does from react library

"userMessagesUnread": "Hello <1>{{name}}</1>, you have {{count}} unread message."

<p data-i18n="userMessagesUnread">
  Hello <strong>{{name}}</strong>, you have {{count}} unread message
</p>

[adrai]

No, there is no Trans component for jquery-i18next

[AlexandrTsvetkov]

@adrai Exactly, that's why this issue is the feature proposal :)

[adrai]

There's no plan for that. Feel free to contribute with a PR if you like to.