Entfernen Sie alle Leerzeichen zwischen den tags mit JavaScript

Ich versuche zum entfernen von Leerraum zwischen tags, so dass childNodes enthält nur die tags Knoten nicht die white-space-Knoten zu. Hier ist mein code : 

<li>            
    <label for="firstName"  class="mainLabel">First Name : </label>                                 
    <input type="text" name="firstName" id="firstName"/>                                    
    <span>This must be filled</span>
</li>

Ist hier der JS-code : 

var parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>\n</g,"><");
firstName.parentNode.innerHTML = parentHTML;

Aber wenn ich alert parentHTML ich bekomme die gleiche alte string.

  • In einer regex whitespace-Zeichen nicht \n es \s.
  • Warum sind Sie versuchen zu entfernen, das Leerzeichen auf dem client in JavaScript auf DOM-Knoten, die bereits geleistet (vermutlich)? Der browser ignoriert das Leerzeichen trotzdem. Wenn Sie möchten, senden kompakter HTML an den client müssen Sie es ändern auf der server-Ebene.
InformationsquelleAutor Rafael Adel | 2012-08-17
  1. 20

    Es ist (nicht finden Sie nach der Regel), da Zeichenfolgen unveränderlich sind, denke ich, und Sie setzen der innerHTML des parent-Elements genau die gleiche Zeichenfolge, die Sie abgerufen von früher.

    Stattdessen würde ich vorschlagen:

    var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstname.parentNode.innerHTML,
    newHTML = parentHTML.replace(/\>\s+\</g,'');
firstname.parentNode.innerHTML = newHTML;

console.log(parentHTML, newHTML, (parentHTML == newHTML));

    JS Fiddle demo.

    Bezug auf den Kommentar von jfriend00 (unten), es scheint der reguläre Ausdruck war das problem, das \n hat nicht mit dem gelieferten Muster, wenn das der Fall ist, wird die folgende änderung erfüllt die Anforderungen:

    var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>\s+</g, "><");
firstName.parentNode.innerHTML = parentHTML;

console.log(firstname, parentHTML);​

    JS Fiddle demo.

    Referenzen:

    • Es war nichts falsch mit der string-Zuweisung in der OP ' s original-JS-code. Strings sind unveränderlich, aber .replace() liefert eine neue Zeichenkette, die zugewiesen werden können parentHTML genau wie die OP war so, was auch immer Thema der OP-code hatte, war es nicht, weil der string Unveränderlichkeit.
    • ah? Gut, danke für die Korrektur. Auch das problem? Anscheinend ist der regex-Muster. Sollte ich gekannt habe, zu schauen, gibt es erste Antwort bearbeitet, aktualisiert und korrigiert. =/
    • Adam Leggett ' s Antwort unten ist das einzige, welches funktioniert..
    InformationsquelleAutor David Thomas
  2. 16

    Für die meisten Fälle empfehle ich das entfernen von Leerzeichen von:

    • Anfang des Dokuments
    • Ende des Dokuments
    • Nach > Charakter
    • Vor < Charakter

    Gibt es zwei Fälle, die ich vorstellen kann, wo diese nicht tun, was Sie wollen, und das sind die gleichen zwei Fällen, die Auswirkungen auf die weniger aggressive Lösungen vor.

    • Leeren Raum zwischen inline-block Elemente ist tatsächlich eine beabsichtigte oder erwartete Teil des Layouts. Wenn dieser Abstand minimiert wird, um null-Zeichen, die implizit Raum zwischen den Elementen entfernt. Dies kann vermieden werden, indem Sie meinen regex unten zu ersetzen " ".

    • Meine ursprüngliche Antwort wurde aktualisiert, um die Leerzeichen beizubehalten, in <script>, <style>, <pre> oder <textarea> - tags. Alle diese außer <pre> sind CDATA-was bedeutet, dass der Inhalt nicht HTML und analysiert werden, bis das End-tag gefunden wird, was bedeutet, dass die regex ist eine komplette Lösung. Wenn ein <pre> geschachtelt ist oder die white-space CSS-Eigenschaft verwendet, so wird diese nicht bewahren Ihren Inhalt.

    Die Lösung:

        collapsed = expanded.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");
    • Dies ist die einzige, die funktioniert. Die akzeptierte Antwort verhält sich nicht gut, wenn der string enthält doppelte Anführungszeichen.
    • absolut die beste Antwort! sollte die auserwählte sein.
    • Tolle Antwort, wenn es entfernt Leerzeichen vor <a> - tags, das ist wohl nicht vorgesehen
    InformationsquelleAutor Adam Leggett
  3. 10

    nur aus Leerzeichen:

    parentHTML = parentHTML.replace( new RegExp( "\>[ ]+\<" , "g" ) , "><" );

    neue Zeile, Leerzeichen und Tabulatoren:

    parentHTML = parentHTML.replace( new RegExp( "\>[\s]+\<" , "g" ) , "><" );

    https://regex101.com/r/sD7cT8/1

    • \r\n ist mehr, wie es statt \n\t
    • klingt wie eine Meinung und muss nicht jede Frage auf dieser Seite.
    InformationsquelleAutor Joeri
  4. 3

    Können Sie behandeln ein html-tag als string in js? Ich denke, es kann getan werden.
    versuchen Sie, diese!

    s.replace(/\s+/g, ' ');
    • NÖ, ersetzen würde auch Räume, wie z.B. in: <span>Wanted Spaces</span>
    InformationsquelleAutor ln2khanal
  5. 0

    Stieß ich auf diesen thread, weil ich war auf der Suche nach einer Lösung, um Lücken zu beseitigen um divs verursacht durch Leerzeichen im HTML-Quelltext, oder, Zeilenumbrüche in meinem Fall.

    Bevor ich erkannte, dass der weiße Raum könnte dazu führen, dass diese Lücken, ich wollte Nüsse, die versuchen, um loszuwerden von Ihnen. Ich will meinen HTML-Quelltext formatiert für bessere Lesbarkeit, so komprimieren der code ist nicht für mich eine gute Lösung. Auch wenn ich behandelt es dieser Weg, ist es nicht fix divs generiert werden, die von Google und anderen Anbietern.

    Begann ich mit dem erstellen der folgenden Funktion und den Aufruf im body onload.

    function Compress_Html() {
    //Remove whitespace between html tags to prevent gaps between divs.
    document.body.innerHTML = document.body.innerHTML.replace( /(^|>)\s+|\s+(?=<|$)/g, "$1" );
}

    Diese schien zu funktionieren tadellos, aber leider, es bricht das Google-Suchfeld habe ich in meinem footer.

    Nach dem Versuch viele Variationen der regex-Muster, ohne Erfolg, ich fand diese regex-tester bei http://www.regexpal.com/. Ich soweit ich das beurteilen kann, der Folgendes Muster hat, was ich brauche.

    ( /(^|>)[ \n\t]+/g, ">" )

    Sagte, die Funktion war immer noch brechen das Suchfeld ein. So landete ich Umzug in ein jQuery document ready Funktion. Jetzt funktioniert ' s und nicht brechen das Suchfeld ein.

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $( document ).ready(function() {
        document.body.innerHTML = document.body.innerHTML.replace( /(^|>)[ \n\t]+/g, ">" );
    });
</script>
    • Bitte siehe meine überarbeitete Antwort. Sie haben wahrscheinlich einen <script> tag, dass wurde geändert und Ihre version der regex passiert, um nicht zu zerbrechen.
    InformationsquelleAutor MFM
Schreibe einen Kommentar