如何保留換行符

換行符和回車符...必須是編碼中最複雜的部分。（對我來說）如何保留換行符

已經在頁面（這些來自數據庫存儲爲This from Ricardo\nAnd also a test\nRent 3000.00）驗證碼：

<td title="This from Ricard 
And also a test 
Rent 3000.00" style="width:198px;text-align:left">....</td>

然後用它來獲取與 '隱藏' \ n的

var v = $('#'+i).parent().attr('title');  // i = id of <span> child of <td>

title屬性

一路上，換行符迷路，並使用變量v到一個文本輸入框：

This from RicardAnd also a testRent 3000.00

需要什麼來保存\n's，並將其改爲如下所示？

$Screenshot of desired result (with \n's present) after clicking edit$

來源

2012-09-15 David

是您的文本輸入框多行或單行嗎？你想\ n寫出來或只是在那裏休息嗎？ – nooitaf

你必須爲'\ n'解析字符串，然後用'\\'''逃脫你的\\ \\ .. –

@FrançoisWahl：那就是他從哪裏得到的。然後他說「中斷會丟失並將變量v用於文本輸入框」。我假設他將文本輸入的值設置爲從td標題獲得的值「v」。 – nooitaf

換行符仍然存在，只是瀏覽器試圖呈現它們。

如果你仍然想看到「\ n」試試這個：

var v = $('td:first-of-type').attr('title').replace(/\n/g, "\\n");

另外，如果你要的是不是看「\ n」，而是看到了換行符，你可以這樣做它是這樣的：

var v = $('td:first-of-type').attr('title').replace(/\n/g, "<br/>");

入住這JSBin

來源

2012-09-15 23:02:29 Kryz

代碼的第一部分只是具有所需的效果。在輸入（文本）框中，顯示「來自Ricard的這個\ n並且也是test \ nRent 3000.00'。完善。謝謝。 – David

永遠記得接受最有用的答案。 – Kryz

感謝您的提醒。 :) – David

好吧，如果你把字符串轉換爲文本輸入框，不會有新的生產線，因爲文本輸入框是單行純文本。

的\n在那裏 - 你可以通過它們試圖分裂：

lines = str.split("\n")

來源

2012-09-15 23:00:48

這很有趣。 v看起來像「這是理查德，還有一個測試，Rent 3000.00'。任何想法爲什麼？ – David

你釘了它！哇，我花了30分鐘的那個''分裂失敗...... –

這個問題讓我好奇，所以我不得不檢查源：http://www.w3.org/TR/html401/struct/global.html#adef-title

W3C的是如何徹底無語屬性中的各種形式的空白處理，所以我強迫它假定它遵循與HTML相同的規則。

在HTML下，除非在<PRE>元素或類似CSS規則下，所有空白區域都摺疊爲一個空間用於渲染。

因此：

<p>The quick brown 
fox 
jumped 



over the 
lazy dog</p>

呈現相同：

<p>The quick brown fox jumped over the lazy dog</p>

此HTML行爲，結合事實用戶代理（瀏覽器）可以呈現在他們希望的任何方式的TITLE屬性，使得大多數（如果不是全部的話）這種代理可能沒有理由保留行尾標記（carriage return和newline或\r\n）。

編輯：

如果格式化很重要，title文本可以逃脫，把data-*元素中。使用鼠標懸停功能，自定義彈出框可以顯示格式化的HTML。

編輯2 - 取自你原來的問題：

<td data-title="This from Ricard<br><br>And also a test<br>Rent 3000.00" 
style="width:198px;text-align:left"> 
.... 
</td>

你可以閱讀更多關於data-*屬性在這裏：http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

總之，在一些mouseover代碼，你可以找到的文本與：

var mytitle = <element>.getAttribute("data-title");

然後使用彈出div來顯示字幕

來源

2012-09-15 23:01:37

他們確實保留了行尾標記，他們只是不呈現它們。這允許Web開發人員在不修改文檔的視覺附註的情況下縮進他們的代碼。 – Kryz

是的，那裏的措辭可能會稍微好一些。謝謝。 –

正在討論的文本將進入輸入值=「」標記。這與HTML文本相同嗎？我嘗試了Ashirvad的建議，但那並不奏效。 – David

您將需要從數據庫中直接閱讀。當爲站點生成HTML時，會解釋行結束符，這就是爲什麼您在代碼中看到多行td元素的原因。

當你去引用那個td元素時，它會在一行中吐出這個值。一旦這些數據丟失，您無法以任何方式重新創建它。

來源

2012-09-15 23:02:46

我不認爲數據（\ n's）丟失。 – David

它看起來確實如此，謝謝你讓我知道！這肯定會改變我的HTML呈現方式的心智模式。 –

你可以使用javascript全局方法escape()來編碼你的字符串v和unescape（）來解碼它以備使用。

這裏是your5小提琴

http://jsfiddle.net/jYNKG/

代碼中的這條線，可就是這樣

var v = escape($('#'+i).parent().attr('title'));

來源

2012-09-15 23:03:17 Ashirvad

給了這個嘗試，但它沒有使輸入值有\ n – David

你可以提供一個jsfiddle嗎？ – Ashirvad

我可以讚揚你嗎？ – David

根據HTML規範的所有換行符應該是「逃脫」的
又名重播

http://www.w3.org/TR/2006/REC-xml11-20060816/#sec-line-ends

http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize

來源

2012-09-15 23:07:10

如何保留換行符

回答

相關問題