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

- caroline

---

请注意，上述是无效的HTML。您必须在<textarea>中转义<和&字符，就像在其他元素中一样：<textarea>&lt;p>some text&lt;/p></textarea>。浏览器可以让您逃脱错误，但只有在您的文本包含字符串</textarea之前... - bobince

如果您对服务器有控制权，并且正在以表单形式提交它，则还可以在服务器上进行解析。这种方式可能会更快。在PHP中，您可以使用DOMDocument类。 - Hutch Moore

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值创建元素更快/更高效。

- Kevin

---

哦，我的天啊...这正好符合我们的需求！哦，谢谢你，谢谢你，Kevin。救命稻草...我又可以呼吸了。;) 你们在stackoverflow上真是太棒了。我希望我能像你们一样开发。我只是一个低贱的10年以上前端开发人员和设计师，最近才接触到jQuery。 再次感谢！ - caroline

不用谢。请记住，这可能无法完全按照您希望的方式处理嵌套元素等内容。在此<textarea>中，您的HTML将有多简单？ - Kevin

将有许多表格、ul/li等。这是一些相当丑陋的代码，因为它实际上是我们从电子邮件模板中提取的，并允许管理员编辑并保存回数据库的应用程序。因此，它是基于非常丑陋的表格的代码。 - caroline

你可以选择像Patrick DW这样的解决方案，但是任何无效的HTML可能无法正确解析并可能导致错误。 - Kevin

Answer 2

试试这个：

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

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

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

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

它将的内容转换为元素，遍历它们并修剪内容，然后将结果HTML插入回<textarea>中。 <hr/> <strong>编辑：</strong>根据@bobince的建议修改为使用.val()而不是.text()。

- user113716

---

@Marko - 谢谢，但可能会有缺陷。这取决于实际的HTML与期望的输出。 - user113716

应该使用 val() 而不是 text() 来获取/设置文本区域（或其他输入框）的内容。text() 不会返回当前值，它返回 HTML 标记中的初始值，除了 IE 由于一个 bug。请避免使用。 - bobince

感谢@bobince的提醒。已更新。:o) - user113716

为了覆盖输入面板中的任何元素，请使用“＃inputPane *”而不是“＃inputPane> p”。 - DMI

@Dave - 你说得没错，但我好奇你是否看的是这个页面的缓存版本，因为我已经改了很久了。:o) - user113716

Answer 3

这是我会做的方法（演示）：

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

- Mottie

Answer 4

你不需要使用jQuery来从文本区域中修剪前导/尾随空格。你只需要用一行代码编写它

之前：

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

- Vlad

Answer 5

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

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

免责声明：这只是快速搭建的，可能无法涵盖每种情况。

- DMI

Answer 6

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

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

或者一行代码实现：

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

- kevingessner