Trim leading/trailing whitespace from textarea usi

2019-02-21 22:25发布

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);

6条回答
我想做一个坏孩纸
2楼-- · 2019-02-21 23:00

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()));
查看更多
老娘就宠你
3楼-- · 2019-02-21 23:01

You don't need jQuery to Trim leading/trailing whitespace from textarea. You need to code it in 1 line

Before:

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

After:

<textarea id="inputPane" cols="80" rows="40" class="pane"><p>some text here...</p></textarea>
查看更多
等我变得足够好
4楼-- · 2019-02-21 23:02

This is how I would do it (demo):

$('.pane').val(function(i,v){
    return v.replace(/\s+/g,' ').replace(/>(\s)</g,'>\n<');
});
查看更多
聊天终结者
5楼-- · 2019-02-21 23:04

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.

查看更多
We Are One
6楼-- · 2019-02-21 23:08

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.

查看更多
Luminary・发光体
7楼-- · 2019-02-21 23:21

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

查看更多
登录 后发表回答