javascript - 如何保留换行符

Question

换行和回车……一定是编码中最复杂的部分。（为了我）

将此代码放在页面中（来自存储为的数据库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>

然后用它来获取带有'hidden'\n's的title属性

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

在此过程中，换行符会丢失并使用变量 v 进入文本输入框：

This from RicardAnd also a testRent 3000.00

需要什么来保留并使其\n's看起来像下面这样？

$单击编辑后所需结果的屏幕截图（存在 \n）$

score 16 · Accepted Answer

换行符仍然存在，只是浏览器尝试呈现它们。

如果您仍想查看“\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

score 2 · Accepted Answer

您可以使用 javascript 全局方法escape()对字符串 v 进行编码，并使用 unescape() 对其进行解码以供使用。

这是你的 5 小提琴

在您的代码中，这一行可以是这样的

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

score 1 · Accepted Answer

好吧，如果您将字符串放入文本输入框中，则不会有新行，因为文本输入框仅用于单行文本。

在\n那里 - 您可以尝试按它们拆分：

lines = str.split("\n")

score 0 · Accepted Answer

这个问题让我很好奇，所以我不得不检查来源：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>

简而言之，在某些mouseover代码中，您可以找到以下文本：

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

然后使用弹出的 div 显示 mytitle

score 0 · Accepted Answer

您需要直接从数据库中读取它。为站点生成 HTML 时，正在解释行尾，这就是您在代码中看到多行 td 元素的原因。

当你去引用那个 td 元素时，它会在一行中吐出值。一旦这些数据丢失，您将无法以任何方式重新创建它。

score 0 · Accepted Answer

根据 HTML 规范，所有换行符都应该被“转义”，也就是由


6 回答 6