如何对 Jquery 对象进行线路制动

Posted 2023-05-08

【中文标题】如何对 Jquery 对象进行线路制动

【英文标题】：how to make line brake to Jquery object

【发布时间】：2021-09-29 06:43:32

【问题描述】：

我正在做一个多语言页面进行练习，我想在我显示的文本中添加换行符。有什么办法可以解决。我也试过\n 和<br>。

这是我的代码：

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>

感谢您的帮助。

【问题讨论】：

这能回答你的问题吗？ jQuery text() and newlines

【参考方案1】：

您可以使用任何唯一的字符串（如\n）并在设置文本后解析最终对象。

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/>'));

【参考方案2】：

$(this).text(arrLang[lang][$(this).attr("key")]); 将编辑文本。所以 将按字面意思打印为字符串。 如果您使用.html 而不是.text，您可以使用<br>，它会添加一个换行符。即$(this).html(arrLang[lang][$(this).attr("key")]);

【参考方案3】：

由于 Snippets 不提供对 LocalStorage 的访问，我创建了以下 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());
    );
  );
);

通过添加一些小功能，我们可以分解需要的活动，让管理变得更容易。

对于 HTML 中的换行符，您可以使用很多方法。我在这个例子中使用了<br />。在 javascript 或 JSON 中，您需要使用常见的回车换行格式：\r\n。所以我们需要一个可以检测到\r\n并将<br />替换为正确显示的函数。

您可以看到其他功能都只是帮助来回切换并保存首选项。