Supprimer les blancs et les sauts de ligne entre les éléments HTML en utilisant jQuery

une version récursive:

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

je pense que ça va le faire...

cleanWhitespace: function(element) {
 element = $(element);
 for (var i = 0; i < element.childNodes.length; i++) {
   var node = element.childNodes[i];
   if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
     Element.remove(node);
 }
}

vous pouvez probablement faire mieux après avoir paramétré HTML dans un noeud DOM. Une fois que le navigateur a tout analysé et a construit un arbre DOM à partir de notre markup, vous pouvez faire une promenade DOM et pour chaque noeud de texte que vous trouvez, soit l'enlever complètement si elle n'a pas de caractères non-espaces, ou couper les espaces blancs sur le début et la fin de celui-ci si elle le fait.

C'est ce qui a fonctionné pour moi et la découverte étape par étape:

la sortie est de la console chrome

premier locato le noeud parent contenant le méchant espace blanc

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​]

vous pouvez voir cela est enveloppé dans un tableau à partir des [] consoles jQuery sera toujours retourner un tableau comme la structure même quand un seul élément a été trouvé.

donc pour arriver au logement HTM, nous prenons le premier article en le tableau à l'index 0

$('.controls label[class="radio"]').parent()[0];

<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​

notez qu'il n'y a plus de [] parenthèses. La raison pour laquelle nous devons faire ceci est parce que jQuery ignorera les espaces blancs dans le dom mais HTMLElement ne le fera pas, Regardez ce qui se passe quand nous accédons à la propriété childNodes

$('.controls label[class="radio"]').parent()[0].childNodes;

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

nous avons encore un tableau, oui vous repérez les crochets [] mais voyez-vous une autre différence, regardez toutes les virgules, que nous ne pouvions pas obtenir avec jQuery. Merci HTMLElement mais maintenant nous pouvons y aller retour à jQuery parce que je veux l'utiliser au lieu d'une boucle for, êtes-vous d'accord avec moi? Donc, permet d'envelopper le tableau dans jQuery et de voir ce qui se passe:

$($('.controls label[class="radio"]').parent()[0].childNodes);

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

parfait! nous avons exactement la même structure encore mais nnow à l'intérieur d'un objet jQuery permet donc d'appeler chacun et d'imprimer "ceci" à la console pour voir ce que nous avons.

$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   console.log('|'+$(this).html()+'|');
});

|<input id="gender_f" name="gender" type="radio" value="f">Female|
|undefined|
|undefined|
|<input id="gender_m" name="gender" type="radio" value="m" checked="">Male|
|undefined|
|undefined|

donc nous utilisons jQuery pour obtenir le html de chaque élément, la substance standard `$(ceci).html et parce que nous ne pouvons pas voir l'espace blanc permet pad avec un tuyau |, bon plan, mais qu'avons-nous ici? Comme vous pouvez le voir, jQuery n'est pas capable de transformer les espaces en html et maintenant nous n'avons pas défini. Mais c'est encore mieux parce que là où un espace pourrait être véridique Non défini est certainement falsy =)

alors débarrassons-nous des suceurs avec jQuery. Tout ce dont nous avons besoin est $(this).html() || $(this).remove(); voyons:

$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   $(this).html() || $(this).remove();
});

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

Oh mon Dieu.. mais n'ayez pas peur! Chacun renvoie la structure précédente et non celle qu'on a changée. regardez ce que notre requête initiale retourne maintenant.

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
<label class=​"radio">​…​</label>​
</div>​]

Et Wallah! Tous sexy et jolie =)

donc là vous l'avez, Comment supprimer les espaces entre les éléments/tags style ala jQuery.

nJoy!

j'ai dû modifier un peu la réponse acceptée parce que pour une raison quelconque, chrome ne voulait pas supprimerechild() sur les noeuds d'espace. Si cela se produit, vous pouvez remplacer le noeud par un noeud de texte vide comme dans cet exemple la fonction helper:

 var removeWhiteSpaceNodes = function ( parent ) {
    var nodes = parent.childNodes;
    for( var i =0, l = nodes.length; i < l; i++ ){
      if( nodes[i] && nodes[i].nodeType == 3 && !/\S/.test( nodes[i].nodeValue ) ){
        parent.replaceChild( document.createTextNode(''), nodes[i]  );
      }else if( nodes[i] ){
        removeWhiteSpaceNodes( nodes[i] );
      }
    }
  }

il prend un noeud à partir duquel vous voulez supprimer whitespace et recursively remplace tous les enfants whitespace avec un textnode vraiment vide.

Utiliser

$($.parseHTML(widgetHTML, document, true)).filter("*"),

vous pourriez $.trim(widgetHTML); pour obtenir la lecture des espaces blancs environnants.