Not able to translate tag inside div by i18next library

问题

</head>

<body>
    <div id="add">

        <div data-i18n="key">You have to <a href="">Click here</a> to find better result</div>

// If I am using that way that translate complete div and remove link from my text.

    <div data-i18n="key">You have to</div> <a href="" data-i18n="key2">Click here</a> <div data-i18n="key3">to find better result</div>

// If I am using that way code working fine but for this I have to use 3 keys for single sentences. Is it possible to fix this by single key ?

    <script>
        i18next
        i18next.use(window.i18nextBrowserLanguageDetector)
        i18next.use(window.i18nextXHRBackend)

        .init({
            debug: true,
            tName: 't',
            handleName: 'localize',
            selectorAttr: 'data-i18n',
            targetAttr: 'i18n-target',
            optionsAttr: 'i18n-options',
            useOptionsAttr: true,
            parseDefaultValueFromContent: true,
            initImmediate: true,
            fallbackLng: false,
            interpolation: {
                "escapeValue": true,
                "prefix": "{{",
                "suffix": "}}",
                "formatSeparator": ",",
                "unescapePrefix": "-",
                "nestingPrefix": "$t(",
                "nestingSuffix": ")"
            },

            detection: {
                order: ['querystring', 'cookie', 'navigator', 'htmlTag'],
                lookupCookie: 'i18next',
                lookupLocalStorage: 'i18nextLng',
                caches: ['cookie'],
            },

            "backend": {
                "loadPath": "/locales/{{lng}}/{{ns}}.json"
            }

        }, function(err, t) {
            jqueryI18next.init(i18next, $);
            $('#add').localize();
        });

    </script>

</body>

This code translate complete div

回答1:

a) Add the tag to your translated text. -> One key

"key": "You have to <a href="">Click here</a> to find better result"

and

<div data-i18n="html:key">You have to <a href="">Click here</a> to find better result</div>

to set innerHTML

b) Interpolate the a tag into translation. -> Two keys

"key": "You have to {{link}} to find better result"

with:

$('#add').localize({ link: '<a href="">Click here</a>', interpolation: { escapeValue: false }});

translate Click here using i18next.t directly

来源：https://stackoverflow.com/questions/44154275/not-able-to-translate-a-tag-inside-div-by-i18next-library

标签

localization

i18next

Not able to translate <a> tag inside div by i18next library

问题

回答1: