79258

replace linebreaks to get them working with jquery

Question:

I have following small script to preview some text before submitting it to store in a database:

jQuery(function($) { var input = $('#contents'), preview = $('#previewaccordion div.viewcontents'); input.keyup(function(e) { preview.html(input.val()); }); });

but if I type text with line-breaks it ignores them and writes all of them in one line. How could I replace the line-breaks so that they show correctly?

Answer1:

I assume that you are using a textarea for the input. There are \n used as linebreaks, which have no influence in HTML. So you have to replace them with br-tags:

input.val().replace(/\n/g, "<br />");

Answer2:

It's nothing to do with jQuery: Linebreaks in HTML are not significant, they're just whitespace (like spaces and tabs).

To force a linebreak in HTML, you use a <br> tag. So you could change

preview.html(input.val());

to

preview.html(input.val().replace(/\r?\n/g, '<br>'));

Note that you're also not escaping HTML special characters (like < or &), and so if you type them, your output may not be correct. So you might go with:

preview.html(input.val().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\r?\n/g, '<br>'));

And finally, I'd hook keypress as well as keyup, so you see characters created via key repeat (which fires keypress, but not keyup).

<a href="http://jsbin.com/apiles" rel="nofollow">Live example</a> | <a href="http://jsbin.com/apiles/edit" rel="nofollow">source</a>

Answer3:

Hiya <strong>demo here:</strong> <a href="http://jsfiddle.net/STnhV/1/" rel="nofollow">http://jsfiddle.net/STnhV/1/</a>

hope this helps! cheers!

<strong>Jquery Code:</strong>

$(document).ready(function() { $('#inputfoo').keyup(function() { $('#outputbar').html($(this).val().replace(/\n/g,'<br/>')); }); }); ​

Answer4:

Replace the linebreaks to html break tags when you render the output from the database.

Recommend

  • How can display the lines from linux log file in browser
  • Getting rid of backslashes
  • Replacing a new line with its html equivalent in PHP
  • Making the blog comments posted by users safe
  • What is the function of the additional coprocessor register of the MRC command?
  • print lines between patterns individual separate files
  • What's the best way to download multiple images and display multiple UIImageView?
  • Does OpenCL allow concurrent writes to same memory address?
  • Filter log files(_success and _log) in FileSystem.liststatus
  • why adding a space after `(.+?)` can completely change the result
  • Can TextIO write to prefixes derived from the window maxTimestamp?
  • @RunWith causes Maven to ignore my Test running with my own runner
  • respondsToSelector - not working
  • Can I disable IE compatibility mode only for content within a ?
  • Replicating and differentiating portions of a form
  • Gforce min not supported for character in data.table
  • how to resolve OAuthException: (#100)
  • force json_encode to create strings
  • Converter from SAT to 3-SAT
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • cordova is not defined - cordova.js has already been loaded :: Ionic
  • jQuery: add elements until a particular height is reached
  • SAXReader not re-ecape characters
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Combining two different ActiveRecord collections into one
  • Multicolored edittext hint
  • Redux Form - Not able to type anything in input
  • How can I sort a a table with VBA with given text condition?
  • How to use carriage return with multiple line?
  • jQuery .attr() and value
  • Checking free space on FTP server
  • All Classes Conforming to Protocol Inherit Default Implementation
  • javascript inside java/jsp code
  • Sending data from AppleScript to FileMaker records
  • R: gsub and capture
  • AT Commands to Send SMS not working in Windows 8.1
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Load html files in TinyMce
  • Hits per day in Google Big Query