views:

229

answers:

5

following code is an example of text placed into a textarea from a database.

<textarea id="inputPane" cols="80" rows="40" class="pane">
<p>
    some text here...
</p>
  <p>
    more text here...
</p>
</textarea>

using jQuery's .trim what is the actual jquery code to remove all leading and trailing whitespace and have the textarea display very similar to below?

<textarea id="inputPane" cols="80" rows="40" class="pane">
    <p>some text here...</p>
    <p>more text here...</p>
</textarea>

I've worked on this for hours with no success trying varying combinations with .trim

$('#inputPane')jQuery.trim(string);

Thank you everyone.

A: 

jQuery.trim() will remove leading and trailing whitespace from the entire string -- in this case, before the first <p> and after the last </p>. You want something more complex, which is to remove whitespace between certain tags. This is not necessarily easy, but could (perhaps!) be accomplished with a regular expression, for example:

// assuming val is the textarea contents:
val = val.replace(/>\s*</, '><').replace(/\s+$/, '');

DISCLAIMER: This was just quickly put together and may not cover every case.

Dave
A: 

Get the value, trim the value, set the value:

var value = $('#inputPane').val();
value = $.trim(value);
$('#inputPane').val(value);

Or in one line:

$('#inputPane').val($.trim($('#inputPane').val()));
kevingessner
+3  A: 

Try this:

var $input = $('#inputPane');

var $container = $('<div>').html( $input.val() );

$('*', $container).text( function(i,txt) {
    return $.trim( txt );
});

$input.val( $container.html() );

It turns the content of the textarea into elements, walks through them and trims the content, then inserts the resulting HTML back into the textarea.


EDIT: Modified to use .val() instead of .text() as noted by @bobince

patrick dw
+1 I like this very much.
Marko
@Marko - Thanks, but there could be flaws, though. Depends on the actual HTML vs. the desired output.
patrick dw
It should be `val()`, not `text()`, to get/set the content of a textarea (or other input). `text()` doesn't return the current value, it returns the initial value in the HTML markup, except in IE due to a bug. Avoid.
bobince
Thanks @bobince for the note. Updated. :o)
patrick dw
To cover any element within the input pane, use '#inputPane *' instead of '#inputPane > p'.
Dave
@Dave - You're right, but I wonder if you're looking at a cached version of this page, because I changed it quite a while ago. :o)
patrick dw
Very possibly. My mistake! Been awake too long...
Dave
+1  A: 

You could try something like this:

jQuery(function(​$) {
    var pane = $('#inputPane');
    pane.val($.trim(pane.val()).replace(/\s*[\r\n]+\s*/g, '\n')
                               .replace(/(<[^\/][^>]*>)\s*/g, '$1')
                               .replace(/\s*(<\/[^>]+>)/g, '$1'));
});​

Which gives the result:

<p>some text here...</p>
<p>more text here...</p>

Though this may not be bulletproof, it should prove to be much faster/more efficient than creating elements from the HTML value of the textarea.

Kevin
oh my gosh... this works exactly like we need it to! oh Thank you, Thank you Kevin. Life saver... i'm breathing again. ;)You guys on stackoverflow are just amazing. i wish i could develop like you guys. i'm just a lowly veteran 10+ year front-end developer and designer that's stumbled into jQuery lately.Thank you again!
caroline
You're welcome. Keep in mind that this may not work exactly how you'd like with nested elements and such. How simple will your HTML be within this `<textarea>`?
Kevin
will have many tables, ul/li's, etc. It's some pretty ugly code because it is actually email templates that we are pulling into our app and allowing admins to edit and save back to the database. So it's very ugly table-based code.
caroline
You may opt for a solution like patrick dw's, but any invalid HTML may not be correctly parsed and could cause errors.
Kevin
A: 

This is how I would do it (demo):

$('.pane').val(function(i,v){
    return v.replace(/\s+/g,' ').replace(/>(\s)</g,'>\n<');
});
fudgey