Обрезать начальные/конечные пробелы из текстовой области с помощью jQuery?

Следующий код является примером текста, помещенного в текстовую область из базы данных.

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

jquery whitespace trim trailing
person caroline    schedule 15.09.2010    source источник
comment
Обратите внимание, что приведенный выше код является недопустимым HTML. Вы должны экранировать символы < и & внутри <textarea>, как и в других элементах: <textarea>&lt;p>some text&lt;/p></textarea>. Браузеры позволяют избежать ошибки, но только до тех пор, пока ваш текст не будет содержать строку </textarea...   -  person bobince    schedule 16.09.2010
comment
Если у вас есть контроль над сервером и вы отправляете его в форму, вы также можете просто выполнить синтаксический анализ на сервере. Наверное, так было бы быстрее. В PHP вы можете использовать класс DOMDocument.   -  person Hutch Moore    schedule 08.06.2016

Ответы (6)


arrow_upward
7
arrow_downward

Вы можете попробовать что-то вроде этого:

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-значения текстовой области.

person Kevin    schedule 15.09.2010
comment
о боже... это работает именно так, как нам нужно! о, спасибо, спасибо, Кевин. Спасатель... я снова дышу. ;) Вы, ребята, на stackoverflow просто потрясающие. Я хотел бы развиваться, как вы, ребята. я всего лишь скромный ветеран с более чем 10-летним опытом разработки и дизайна интерфейса, который недавно наткнулся на jQuery. Еще раз спасибо! - person caroline; 16.09.2010
comment
Пожалуйста. Имейте в виду, что это может работать не совсем так, как вам хотелось бы, с вложенными элементами и тому подобным. Насколько простым будет ваш HTML в этом <textarea>? - person Kevin; 16.09.2010
comment
будет иметь много таблиц, ul/li и т. д. Это довольно уродливый код, потому что на самом деле это шаблоны электронной почты, которые мы загружаем в наше приложение и позволяем администраторам редактировать и сохранять обратно в базу данных. Так что это очень уродливый код, основанный на таблицах. - person caroline; 16.09.2010
comment
Вы можете выбрать решение, подобное решению patrick dw, но любой недопустимый HTML-код может быть неправильно проанализирован и может вызвать ошибки. - person Kevin; 16.09.2010

arrow_upward
3
arrow_downward

Попробуй это:

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

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

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

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

Он превращает содержимое textarea в элементы, проходит по ним и обрезает содержимое, а затем вставляет полученный HTML обратно в textarea.

EDIT: изменено для использования .val() вместо .text(), как отметил @bobince

person user113716    schedule 15.09.2010
comment
@Marko - Спасибо, но могут быть недостатки. Зависит от фактического HTML по сравнению с желаемым результатом. - person user113716; 16.09.2010
comment
Это должно быть val(), а не text(), чтобы получить/установить содержимое текстовой области (или другого ввода). text() не возвращает текущее значение, оно возвращает начальное значение в разметке HTML, за исключением IE из-за ошибки. Избегать. - person bobince; 16.09.2010
comment
Спасибо @bobince за заметку. Обновлено. :о) - person user113716; 16.09.2010
comment
Чтобы скрыть любой элемент в области ввода, используйте '#inputPane *' вместо '#inputPane › p'. - person DMI; 16.09.2010
comment
@Dave - Вы правы, но мне интересно, смотрите ли вы кэшированную версию этой страницы, потому что я изменил ее довольно давно. :о) - person user113716; 16.09.2010

arrow_upward
2
arrow_downward

Я бы сделал это так (демонстрация):

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

arrow_upward
1
arrow_downward

jQuery.trim() удалит начальные и конечные пробелы из всей строки — в данном случае перед первым <p> и после последнего </p>. Вам нужно что-то более сложное, а именно удаление пробелов между определенными тегами. Это не обязательно легко, но может (возможно!) быть выполнено с помощью регулярного выражения, например:

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

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: это было просто быстро составлено и может не охватывать все случаи.

person DMI    schedule 15.09.2010

arrow_upward
1
arrow_downward

Получить значение, обрезать значение, установить значение:

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

Или в одну строку:

$('#inputPane').val($.trim($('#inputPane').val()));
person kevingessner    schedule 15.09.2010

arrow_upward
1
arrow_downward

Вам не нужен jQuery для обрезки начальных/конечных пробелов из текстовой области. Вам нужно закодировать его в 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>
person Vlad    schedule 03.06.2011