Trim führende/nachfolgende Leerzeichen aus einer textarea mit Hilfe von jQuery?

Folgende code ist ein Beispiel der text in einer textarea aus einer Datenbank.

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

mithilfe von jQuery .trim, was ist das eigentliche jquery-code zu entfernen führende und nachfolgende Leerzeichen und die textarea-display sehr ähnlich unten?

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

Ich gearbeitet habe, für diese Stunden ohne Erfolg versucht, verschiedene Kombinationen mit .trim

$('#inputPane')jQuery.trim(string);
  • Beachten Sie, dass die oben ist ungültiges HTML. Sie müssen fliehen < und & Zeichen innerhalb <textarea>, wie auch in den anderen Elementen: <textarea>&lt;p>some text&lt;/p></textarea>. Browser lassen Sie Sie Weg mit dem Fehler, aber nur bis Ihr text enthält den string </textarea...
  • Wenn Sie die Kontrolle über den server und du bist der Einreichung in eine form, man könnte auch einfach tun, die Parsen auf dem server. Es wäre wahrscheinlich schneller Weg. In PHP, können Sie die DOMDocument Klasse.
InformationsquelleAutor caroline | 2010-09-15
  1. 7

    Könnten Sie versuchen, so etwas wie dieses:

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

    Die das Ergebnis liefert:

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

    Obwohl dies möglicherweise nicht kugelsicher, es sollte erweisen sich als viel schneller/effizienter, als die Erzeugung der Elemente von der HTML-Wert der textarea.

    • oh mein Gott... das funktioniert genau wie wir es brauchen! oh, Danke, Danke Kevin. Life saver... ich bin wieder zu atmen. 😉 Ihr Leute auf stackoverflow sind einfach unglaublich. ich wünschte, ich könnte Ihnen entwickeln, wie Sie Jungs. ich bin nur eine unbedeutende veteran 10+ Jahre-front-end-Entwickler und-designer das ist, stolperte in jQuery letzter Zeit. Nochmals vielen Dank!
    • Du bist herzlich willkommen. Beachten Sie, dass dies möglicherweise nicht genau arbeiten, wie Sie möchten, mit verschachtelten Elementen und so. Wie einfach wird Ihre HTML innerhalb dieser <textarea>?
    • viele Tabellen, ul/li, etc. Es ist ein paar ziemlich hässlichen code, weil es eigentlich E-Mail-Vorlagen, ziehen wir in unsere app und ermöglicht Administratoren, Bearbeiten und speichern in der Datenbank. Es ist also sehr hässlichen Tisch-basierten code.
    • Sie können sich entscheiden für eine Lösung, wie patrick mit der dw, aber alle ungültigen HTML möglicherweise nicht ordnungsgemäß analysiert werden und Fehler verursachen könnte.
    InformationsquelleAutor Kevin
  2. 3

    Versuchen Sie dies:

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

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

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

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

    Es stellt die Inhalte der textarea in Elemente, geht durch Sie hindurch und schneidet den Inhalt, dann fügt den resultierenden HTML-Code zurück in die textarea.

    EDIT: Modifiziert, dass .val() statt .text() wie bereits von @bobince

    • +1 ich mag diese sehr viel.
    • Danke, aber könnte es sein Fehler, wenn. Hängt von der tatsächlichen HTML vs. die gewünschte Ausgabe.
    • Es sollte val(), nicht text() zu get/set-der Inhalt der textarea (oder andere Eingabegeräte). text() nicht den aktuellen Wert zurück, es gibt den ersten Wert in das HTML-markup, außer im IE wegen eines Fehlers. Vermeiden.
    • Danke @bobince für den Hinweis. Aktualisiert. :o)
    • Decken jedes element im input-Bereich, verwenden Sie " #inputPane *' anstelle von '#inputPane > p'.
    • Du hast Recht, aber ich Frage mich, wenn Sie auf eine gecachte version dieser Seite, denn ich habe ihn schon eine ganze Weile her. :o)
    • Sehr vielleicht. Mein Fehler! War zu lange wach...

    InformationsquelleAutor user113716
  3. 1

    jQuery.trim() wird, entfernen Sie führende und nachfolgende Leerzeichen aus dem gesamten string-in diesem Fall vor dem ersten <p> und nach dem letzten </p>. Sie möchten etwas komplexer, die zum entfernen von Leerzeichen zwischen den einzelnen tags. Dies ist nicht unbedingt einfach, aber das könnte (vielleicht!) erreicht werden mit einem regulären Ausdruck, zum Beispiel:

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

    HAFTUNGSAUSSCHLUSS: Das war nur schnell zusammengestellt und kann nicht für jeden Fall.

    InformationsquelleAutor DMI
  4. 1

    Erhält man den Wert, trimmen Sie den Wert, setzen Sie den Wert:

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

    Oder in einer Zeile:

    $('#inputPane').val($.trim($('#inputPane').val()));
    InformationsquelleAutor kevingessner
  5. 1

    Dies ist, wie ich es tun würde (demo):

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

    Brauchen Sie nicht jQuery zu Trimmen führende/nachfolgende Leerzeichen aus einer textarea. Sie brauchen, um code in 1 Zeile

    Bevor:

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

    Nach:

    <textarea id="inputPane" cols="80" rows="40" class="pane"><p>some text here...</p></textarea>
    InformationsquelleAutor Vlad
Schreibe einen Kommentar