如何使用jQuery设置pre标签的文本

Question

我正在使用 pre 标签来容纳一些具有回车符的原始格式文本。当页面第一次显示时，它看起来很好。稍后，我想要刷新 pre 数据。我尝试过两种用 jQuery 实现此目的的方法，一种是使用 .html()，另一种是使用 .text()。两种方式都有点问题，.html 会丢弃回车符，而 .text 则会将回车符变成双倍空格！我还尝试了 .val()，但完全不起作用。下面是代码（当然我每次只使用其中一个 jquery 行）。

<pre id="QComment">Initial Text</pre>

稍后的某个时间,

$('#QComment').text(databack);   // or
$('#QComment').html(databack);

- Knox

---

.text()是否会对你的换行进行“双倍行距”，因为你的内容中有\r\n而不是简单的\n？ - coreyward

如果@coreyward是对的话，请尝试使用databack.replace('\r\n', '\n');。 - zzzzBov

是的，关于内容中有\r\n的观点非常好。但最初的文本中也有\r\n。让我进一步调查一下。 - Knox

上面的替换方式是不正确的。它只会替换单个实例。使用 databack.replace(/\r\n/g, '\n') 来将所有的 \r\n 实例替换为单个 \n。 - coreyward

Coreyward 是正确的，zzzzBov 的想法也在正确的轨道上，但他的建议只替换了第一个 \r\n。 :) - Knox

Answer 1

这是*nix系统和Windows系统之间常见的问题。有人为jQuery编写了一个简单的换行符检测插件newlinecharacter

因此，您可以执行以下操作：

$('#QComment').text(databack.replace(/\r\n/g,EOL));

你正在将所有Windows样式的换行符替换为适合查看数据的系统的换行符。

- Adrian Gonzales

---

这个很好用，纠正了问题，尽管出于某种原因我没有一个EOL但使用了'\n'。 - Knox

啊，是的，EOL 是指列出的插件，它会为您的浏览器生成一个 EOL。不过很高兴它起作用了！ - Adrian Gonzales

Answer 2

对我来说非常好用：演示

也许您遇到了一些编码问题？提供一个示例可能会有所帮助。

（.val() 将 pre 标签的 value 属性设置为无效。）

- Tgr

Answer 3

我建议在这种情况下不要使用jQuery，而是使用普通的JavaScript来设置对象：

document.getElementById('QComment').innerHTML = yourHTML;

对于这么简单的事情，没有理由增加jQuery的开销。如果您想在多个元素上使用它，jQuery是可以的：

$('#selector, .selector, [selector]').each(function(element, index){
  element.innerHTML = yourHTML;
});

- zzzzBov

---

我宁愿不要多打一遍。试图优化jQuery选择器的效果就像用汇编而不是PHP或Java编写代码一样有用 - 当某些东西在将运行一百万次的循环内时，这会产生巨大的影响，但否则这只是浪费时间。 - Tgr

@zzzz 如果页面已经加载了jQuery（用于其他目的），该怎么办？您假设OP仅在这一件事上使用jQuery。 - Šime Vidas

我正在使用jQuery进行JSON发布等操作。 - Knox

@Sime Vidas，完全不是这样。我很抱歉我表达不清楚，我并不是说完全不使用jQuery，我是说在这种情况下不要使用它。因为这个问题非常简单，所以不需要任何jQuery代码。我所提到的“jQuery开销”是指仅为了访问其innerHTML属性而创建新的jQuery对象。 - zzzzBov

根据我的测试用例，document.getElementById('foo').innerHTML = txt; 执行时间为9.5毫秒，而 $('#foo').text(txt); 执行时间为24.4毫秒。因此，性能提升约为15毫秒。为什么有人要写两倍的代码只为了获得15毫秒的收益？这对我来说听起来非常不合理。 - Šime Vidas

@zzzz 我需要更正一下 - 我使用了错误的前缀：应该是微秒，而不是毫秒。因此，收益是15微秒（!!）。 - Šime Vidas

Answer 4

尝试使用标准DOM方法，也许jQuery有它自己的一些特殊处理：

$('#QComment')[0].innerHTML = html;

- Mārtiņš Briedis

---

抱歉，它的行为就像jQuery一样。预文本似乎没有换行符。 - Knox