簡體   English   中英

在 jQuery 中使用 \n 換行符設置文本

[英]Set text with \n newline in jQuery

我在 jQuery 中附加了以下內容。

    game_details_container.append('<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">'+innings_num+'</span> '+team_home+'</th> </tr><tr><td>'+inningsInfo['innings_pp_h']+'</td></tr></table></div>');

變量 inningsInfo['innings_pp_h'] 具有包含換行符 '\n' 標記的文本。

但是,文本已設置為流動且不遵守換行符。 有沒有辦法來解決這個問題。

誰能給我指出如何解決這個問題的正確方向?

如果您想要讓您的\n字符在呈現的 HTML 中創建換行符,您可以嘗試:

game_details_container.append('<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">'
    + innings_num
    + '</span> ' 
    + team_home
    + '</th> </tr><tr><td>'
    + inningsInfo['innings_pp_h'].split("\n").join("<br />")
    + '</td></tr></table></div>'
);

HTML 忽略換行符,除非它們在<pre>標記內。 要強制換行,您需要使用<br><div> (或任何其他塊級元素),或將您的內容放在<pre>標記內。

HTML 的渲染會忽略換行符和重復的空格,因此您需要使用標記來實現相同的結果,例如:

inningsInfo['innings_pp_h'].replace(/\n/g, '<br/>')

連接字符串是一團糟。 請改用模板。

var TEMPLATE = '<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">{{INNINGS_NUM}}</span>{{TEAM_HOME}}</th> </tr><tr><td>{{INNINGSINFO}}</td></tr></table></div>';

var renderedHtml = TEMPLATE.replace(/{{INNINGS_NUM}}/, innings_num)
                           .replace(/{{TEAM_HOME}}/, team_home)
                           .replace(/{{INNINGSINFO}}/, inningsInfo['innings_pp_h'].replace(/\n/g, '<br/>'));

game_details_container.append(renderedHtml);

更整潔,更容易理解。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM