17

I'm using a pre tag to hold some raw formated text that has carriage returns. When the page is first displayed, it looks fine. Later, I want to refresh just the pre data. I've tried two ways to do this with jquery, one using .html() and the other way with .text(). Both sorta work, but the .html throws away the carriage returns and the .text double spaces the carriage returns! I've also tried .val() but that didn't work at all. Here's the code (of course I only use one of the jquery lines at a time.)

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

at some time later,

$('#QComment').text(databack);   // or
$('#QComment').html(databack);
5
  • 3
    Is .text() "double spacing" your returns because your content has \r\n instead of simply \n?
    – coreyward
    Feb 11, 2011 at 19:14
  • 1
    if @coreyward is right, try databack.replace('\r\n', '\n');
    – zzzzBov
    Feb 11, 2011 at 19:19
  • yes, very good point about the content having \r\n in it. But the intial text also has \r\n in it. Let me investigate a bit further.
    – Knox
    Feb 11, 2011 at 19:23
  • 1
    The replace as written above is incorrect. It won't replace more than a single instance. Use databack.replace(/\r\n/g, '\n') to replace all instances of \r\n with a single \n.
    – coreyward
    Feb 11, 2011 at 19:32
  • Coreyward was right and zzzzBov was on the right track, but his suggestion only replaces the first \r\n. :)
    – Knox
    Feb 11, 2011 at 19:51

4 Answers 4

17

This is a common problem between *nix based systems and windows systems. Someone wrote a simple newline detection plugin for jQuery newlinecharacter

So, what you can do is:

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

Which, what you're doing is replacing all windows style line breaks with ones appropriate for the system viewing the data.

2
  • This works great and corrected the problem, although I for whatever reason don't have a EOL but used a '\n'
    – Knox
    Feb 11, 2011 at 19:49
  • Ah yes, the EOL was a reference to the listed plugin, which generates an EOL for your browser. Glad it worked though! Feb 11, 2011 at 20:29
4

Works like a charm for me: fiddle demo

Maybe you have some encoding problem? An example vould help.

(.val() sets the value attribute on the pre tag, which of course has no effect.)

0
1

I would suggest not bothering to use jQuery in this instance, and just set the object using plain old javascript:

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

There's no reason to add the jQuery overhead to something as simple as this. If you want to use this on multiple elements, jQuery is fine:

$('#selector, .selector, [selector]').each(function(element, index){
  element.innerHTML = yourHTML;
});
6
  • 1
    I would rather not bother typing twice as much. Trying to optimize out jQuery selectors is about as useful as writing code in assembly instead of PHP or Java - it makes a difference when something is inside a loop that will run a million times, but it is a waste of time otherwise.
    – Tgr
    Feb 11, 2011 at 19:27
  • @zzzz What if jQuery is already loaded into the page (for other purposes)? You are assuming that the OP is using jQuery just for this one thing. Feb 11, 2011 at 19:28
  • I am using jQuery for json posts, etc.
    – Knox
    Feb 11, 2011 at 19:33
  • @Sime Vidas, not at all. I apologize that I was unclear, I'm not saying to not use jquery at all, I'm saying to not use it in this instance. No jQuery code is necessary because it's so simple. The "jQuery overhead" i was referring to is the creation of a new jQuery object just for the purpose of unboxing the object to access its innerHTML property.
    – zzzzBov
    Feb 11, 2011 at 19:36
  • @zzzz According to my test case, document.getElementById('foo').innerHTML = txt; takes 9.5ms to execute, whereas $('#foo').text(txt); takes 24.4ms to execute. Therefore, the performance gain is around 15 milliseconds. Why would anyone write twice as much code just to have a 15ms gain? Sounds most unreasonable to me. Feb 11, 2011 at 19:48
0

Try using standard DOM methods, maybe the jQuery does something on it's own:

$('#QComment')[0].innerHTML = html;
1
  • sorry, behaves just like jquery. Pre text appears as if there are no returns.
    – Knox
    Feb 11, 2011 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.