使用 jQuery 修剪文本区域中的前导/尾随空白？

Question

以下代码是将文本从数据库放入文本区域的示例。

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

使用 jQuery 的 .trim 删除所有前导和尾随空格并使文本区域显示与下面非常相似的实际 jquery 代码是什么？

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

我已经为此工作了几个小时，但尝试与 .trim 进行不同的组合没有成功

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

Answer 1

你可以尝试这样的事情：

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'));
});​

结果如下：

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

尽管这可能不是万无一失的，但它应该比从文本区域的 HTML 值创建元素更快/更高效。

Answer 2

试试这个：

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

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

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

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

它变成了 textarea 进入元素，浏览它们并修剪内容，然后将结果的HTML插入 textarea.

---

编辑： 修改为使用 .val() 代替 .text() 如@bobince所述

Answer 3

jQuery.trim() 将从整个字符串中删除领先和尾随的空间 - 在这种情况下，在第一个字符串之前 <p> 最后一个 </p>. 。您想要更复杂的东西，即在某些标签之间删除空格。这不一定容易，但是（也许！）可以通过正则表达方式来完成：

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

免责声明： 这只是很快就将其放在一起，可能不会涵盖所有情况。

Answer 4

获取值，修剪值，设置值：

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

或一行：

$('#inputPane').val($.trim($('#inputPane').val()));

Answer 5

这就是我这样做的方式（演示):

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

Answer 6

您不需要jQuery来修剪Textarea的领先/拖延空间。您需要将其编码为1行

前：

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

后：

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