Working HTML tags from JavaScript file (JSON jQuery?)

Question

I am pulling a text from a JavaScript file but the HTML tags don't work.

I followed the best answer here and ran into that problem:
Build multiple language website using jQuery and JSON based methods

This is the part of the JavaScript file:

    var arrLang = {
    "en-gb": {
        "HOME": "Home",
        "ABOUT": "About <br> Us",
        "CONTACT": "Contact Us",
    },
    "zh-tw": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
}; 
    
    // The default language is English
    var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);
    if (!Object.keys(arrLang).includes(lang)){
        lang = 'en';
    }
    // Check for localStorage support
    if('localStorage' in window){
       
       var usrLang = localStorage.getItem('uiLang');
       if(usrLang) {
           lang = usrLang;
       }
    
    }
    
    
    console.log(lang);
    
            $(document).ready(function() {
                 "use strict";
              $(".lang").each(function() {
                $(this).text(arrLang[lang][$(this).attr("key")]);
              });
            });
    
            // get/set the selected language
            $(".language-button").click(function() {
                 "use strict";
              var lang = $(this).attr("id");
              localStorage.setItem('lang', $(this).attr("id"));
              
    
              // update localStorage key
              if('localStorage' in window){
                   localStorage.setItem('uiLang', lang);
                   console.log( localStorage.getItem('uiLang') );
              }
    
              $(".lang").each(function() {
                $(this).text(arrLang[lang][$(this).attr("key")]);
              });
            });

HTML: This is how I pull the Text:

<div class="lang" key="ABOUT"></div>

HTML: Expected result:

About
Us

HTML: This is what I get:

About <br> Us

What is a very simple way to make the HTML tags work in this case?

@s.kuznetsov Thank you very much, this was the solution! I now have learned that text only transfers the plain text, ignoring the html tags. Have a very nice day! — Blacksite
– Blacksite, Commented Jun 13, 2021 at 9:58

DataMind · Accepted Answer · 2021-06-13 09:26:43Z

0

If you use use .innerText in your JavaScript file to put the values into the HTML file, you might want to use .innerHTML instead. This will help if you have tags (like the <br> tag in your situation) in your values.

If you use something else to put the values into the HTML file, please clarify which method you use...

You can find more information about innerHTML vs innerText here.

answered Jun 13, 2021 at 9:26

DataMind

691 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blacksite Over a year ago

Thank you, I have added the entire JS code, but it seems as innerHTML is not used anywhere

DataMind Over a year ago

Indeed, I saw you already found the solution. Good luck with your project!

Blacksite Over a year ago

Thank you very much! Have a very nice day :)

balexandre · Accepted Answer · 2021-06-13 09:34:31Z

0

you're not specifying how you do the replacement, but given your data

var arrLang = {
  "en": {
    "HOME": "Home",
    "ABOUT": "About <br> Us",
    "CONTACT": "Contact Us",
  },
};

you could simply have:

var arrLang = {
  "en": {
    "HOME": "Home",
    "ABOUT": "About <br> Us",
    "CONTACT": "Contact Us",
  },
};

var languageSelected = 'en';
var langData = arrLang[languageSelected];

// for each key in your object
Object.keys(langData).forEach(k => {
  // search for attribute "key" and add string as HTML
  $(`[key=${k}]`).html(langData[k]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li><div class="lang" key="HOME"></div></li>
  <li><div class="lang" key="ABOUT"></div></li>
  <li><div class="lang" key="CONTACT"></div></li>  
</ul>

answered Jun 13, 2021 at 9:34

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

2 Comments

Blacksite Over a year ago

Thank you, I have added the whole JS code. I am stil trying out your answer to make it work somehow

Blacksite Over a year ago

Thank you I saw you have also used '.html' which in my case was the solution :) Have a nice day!

Collectives™ on Stack Overflow

Working HTML tags from JavaScript file (JSON jQuery?)

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related