how to make line brake to Jquery object

Question

I'm doing a multilingual page for practice, and i would like add line brake in to the text what i display. What could be a solution. I tried \n and <br> too.

Here is my code:

var arrLang = {  
    "en": {
        "text": "See Budapest, the Queen of the Danube from brand new perspective as you have never seen before!" 
    },

    "ger": {
         "text": "Nézd meg Budapestet,"

    }
  }; 

  var lang = "en";
  if('localStorage' in window){
     
     var usrLang = localStorage.getItem('uiLang');
     if(usrLang) {
         lang = usrLang
     }
  
  }
          $(document).ready(function() {
            $(".lang").each(function(index, element) {
              $(this).text(arrLang[lang][$(this).attr("key")]);
            });
          });

          $(".translate").click(function() {
           var lang = $(this).attr("id");
  
            // update localStorage key
            if('localStorage' in window){
                 localStorage.setItem('uiLang', lang);
                 console.log( localStorage.getItem('uiLang') );
            }
  
            $(".lang").each(function(index, element) {
              $(this).text(arrLang[lang][$(this).attr("key")]);
            });
          });

p {
  height: 150px;
  width: 380px;
  background-color: grey;
  text-align:center
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="" id="en" class="translate">English</a>
  <a href="" id="ger" class="translate">German</a>
  <p class="lang" key="text">
    Lorem ipsum dolor sit amet <br> consectetur, adipisicing elit. <br>
 Ut hic amet eius soluta exercitationem <br> 
  sunt et ad in, aspernatur at. <br> 
    Facere voluptatem quasi, enim <br>
  </p>
</div>

Thank you for your help.

Does this answer your question? [jQuery text() and newlines](https://stackoverflow.com/questions/4535888/jquery-text-and-newlines) — devlin carnate, Jul 21 '21 at 22:40

score 0 · Answer 1 · answered Jul 21 '21 at 22:31

0

$(this).text(arrLang[lang][$(this).attr("key")]); will edit the text. So
will print literally as a string. If you use .html instead of .text you can use <br> and it will add a line break. i.e. $(this).html(arrLang[lang][$(this).attr("key")]);

answered Jul 21 '21 at 22:31

async await

1,967
1
8
19

score 0 · Accepted Answer · answered Jul 21 '21 at 22:34

You can use any unique string (like \n) and parse the final object after setting the text.

var arrLang = {  
    "en": {
        "text": "See Budapest, the Queen \n of the Danube from brand new perspective as you have never seen before!" 
    },
};


$(this).text(arrLang[lang][$(this).attr("key")]);
$(this).html(this.html().replace(/\n/g,'<br/>'));

Twisty · Answer 3 · 2021-07-21T23:07:59.307

As the Snippets do not offer access to LocalStorage, I created the following Fiddle:

https://jsfiddle.net/Twisty/6c02z1gj/24/

HTML

<div>
  <a href="" id="en" class="translate">English</a>
  <a href="" id="ger" class="translate">German</a>
  <p class="display languange">
    Lorem ipsum dolor sit amet <br> consectetur, adipisicing elit. <br> Ut hic amet eius soluta exercitationem <br> sunt et ad in, aspernatur at. <br> Facere voluptatem quasi, enim <br>
  </p>
</div>

CSS

p {
  height: 150px;
  width: 380px;
  background-color: grey;
  text-align: center
}

JavaScript

$(function() {
  var arrLang = {
    "en": {
      "text": "See Budapest,\r\nthe Queen of the Danube\r\nfrom brand new perspective\r\nas you have never seen before!"
    },
    "ger": {
      "text": "Nézd meg Budapestet,"
    }
  };

  function nlToBr(string) {
    return string.replaceAll("\r\n", "<br />");
  }

  function loadText(arr, target, language, append) {
    if (append == undefined) {
      append = false;
    }
    if (language == undefined) {
      language = "en"
    }
    var myText = nlToBr(arr[language].text);
    if (target == undefined) {
      return myText;
    }
    if (append) {
      $(target).append(myText);
    } else {
      $(target).html(myText);
    }
    return true;
  }

  function getLanguage() {
    var l = localStorage.getItem("lang");
    if (!l) {
      l = "en";
    }
    return l;
  }

  function saveLanguage(l) {
    if (l != undefined) {
      localStorage.setItem("lang", l);
    }
  }

  $(".display").each(function(index, element) {
    loadText(arrLang, element, getLanguage());
  });

  $(".translate").click(function(event) {
    event.preventDefault();
    saveLanguage($(this).attr("id"));

    $(".display").each(function(index, element) {
      loadText(arrLang, element, getLanguage());
      $(element).data("languange", getLanguage());
    });
  });
});

By adding some small functions, we can break up the needed activities and make the management easier.

For Line Breaks in HTML, you can usea lot of methods. I used <br /> for this example. In JavaScript or JSON, you will want to use the common Carriage Return New Line Format: \r\n. So we need a function that can detect and replace \r\n with a <br /> for proper display.

You can see the other functions all just help switch back and forth and save the preferences.

how to make line brake to Jquery object

3 Answers3