使用jQuery从textarea修剪前导/尾随空格？

Posted 2023-02-23

【中文标题】使用jQuery从textarea修剪前导/尾随空格？

【英文标题】：Trim leading/trailing whitespace from textarea using jQuery?

【发布时间】：2011-04-12 22:16:43

【问题描述】：

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

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

使用 jQuery 的 .trim 删除所有前导和尾随空格并让 textarea 显示与下面非常相似的实际 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);

【问题讨论】：

请注意，以上是无效的 html。您必须在 <textarea> 中转义 < 和 & 字符，与在其他元素中相同：<textarea><p>some text</p></textarea>。浏览器可以让您摆脱错误，但前提是您的文本包含字符串 </textarea...

如果您对服务器有控制权，并且以表单的形式提交，您也可以只在服务器上进行解析。这样可能会更快。在 php 中，您可以使用 DOMDocument 类。

【参考方案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>

虽然这可能不是万无一失的，但它应该证明比从 textarea 的 HTML 值创建元素更快/更有效。

【讨论】：

天哪……这完全符合我们的需要！哦，谢谢，谢谢凯文。救生员……我又在呼吸了。 ;)你们在***上真是太棒了。我希望我能像你们一样发展。我只是一个 10 多年经验的前端开发人员和设计师，最近偶然发现了 jQuery。再次感谢您！

不客气。请记住，这可能无法完全按照您对嵌套元素等的要求工作。你的 HTML 在这个 <textarea> 中有多简单？

会有很多表、ul/li 等。这是一些非常丑陋的代码，因为它实际上是我们将电子邮件模板拉入我们的应用程序并允许管理员编辑并保存回数据库。所以这是非常难看的基于表格的代码。

您可以选择像 patrick dw's 这样的解决方案，但是任何无效的 HTML 都可能无法正确解析并可能导致错误。

【参考方案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() 而不是@bobince 所述的.text()

【讨论】：

@Marko - 谢谢，但可能存在缺陷。取决于实际的 HTML 与所需的输出。

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

感谢@bobince 的说明。更新。 :o)

要覆盖输入窗格中的任何元素，请使用 '#inputPane *' 而不是 '#inputPane > p'。

@Dave - 你是对的，但我想知道你是否正在查看此页面的缓存版本，因为我在很久以前更改了它。 :o)

【参考方案3】：

我会这样做 (demo)：

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

【参考方案4】：

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

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

免责声明：这只是快速汇总，可能无法涵盖所有​​情况。

【参考方案5】：

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

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

或者在一行中：

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

【参考方案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>