Suppression des espaces blancs et des sauts de ligne entre les éléments HTML à l'aide de jQuery

Question

À l'aide de jQuery, j'aimerais supprimer les espaces blancs et les sauts de ligne entre les balises HTML.

var widgetHTML = '    <div id="widget">        <h2>Widget</h2><p>Hi.</p>        </div>';

Ça devrait l'être :

alert(widgetHTML); // <div id="widget"><h2>Widget</h2><p>Hi.</p></div>

Je pense que le modèle dont j'aurai besoin est le suivant :

>[\s]*<

Peut-on y parvenir sans utiliser de regex ?

Answer 1

J'ai essayé la technique proposée par l'utilisateur 76888 et cela a bien fonctionné. Je l'ai intégré dans un plugin jQuery pour plus de commodité, et j'ai pensé que la communauté pourrait l'apprécier, donc voici :

jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

Pour l'utiliser, il suffit de l'inclure dans une balise script, puis de sélectionner une balise à nettoyer avec jQuery et d'appeler la fonction comme suit :

$('#widget').cleanWhitespace();

Answer 2

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

Answer 3

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

Answer 4

Vous pouvez probablement mieux faire cela après avoir placé le HTML dans un nœud DOM. Une fois que le navigateur a tout analysé et construit un arbre DOM à partir de notre balisage, vous pouvez faire un DOM walk et pour chaque nœud de texte que vous trouvez, soit le supprimer complètement s'il n'a pas de caractères non blancs, soit couper les espaces blancs au début et à la fin s'il en a.

Answer 5

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

La sortie est de la console de chrome

Tout d'abord, localisez le nœud parent qui contient le vilain espace blanc.

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

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

Vous pouvez voir qu'il s'agit d'un tableau grâce aux crochets []. jQuery retournera toujours une structure de type tableau, même si un seul élément a été trouvé.

Donc, pour atteindre le HTMLElement, nous prenons le premier élément du 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 crochets []. La raison pour laquelle nous devons faire cela est que jQuery ignorera les espaces dans le dom mais pas HTMLElement, regardez ce qui se passe lorsque nous accédons à la propriété childNodes

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

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

Nous avons à nouveau un tableau, oui vous repérez les crochets [] mais vous voyez une autre différence, regardez toutes les virgules, que nous ne pouvions pas avoir avec jQuery. Merci HTMLElement mais maintenant nous pouvons revenir à jQuery parce que je veux utiliser each au lieu d'une boucle for, vous êtes d'accord avec moi ? Donc, enveloppons le tableau dans jQuery et voyons ce qui se passe :

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

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

Parfait ! Nous avons toujours exactement la même structure, mais maintenant dans un objet jQuery, alors appelons chacun d'eux et imprimons "this" dans 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, le truc standard `$(this).html et parce que nous ne pouvons pas voir les espaces blancs, nous les remplissons avec un pipe |, bon plan mais qu'est-ce que nous avons ici ? Comme vous pouvez le voir, jQuery n'est pas capable de transformer l'espace blanc en html et maintenant nous avons undefined. Mais c'est encore mieux parce que là où un espace peut être vrai, undefined est définitivement faux =)

Alors, débarrassons-nous de ces suceurs avec jQuery. Tout ce dont nous avons besoin est $(this).html() || $(this).remove(); Voyons voir :

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

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

Oh là là mais n'ayez crainte ! Chacun d'eux renvoie toujours la structure précédente et non celle que nous avons modifiée, regardons ce que notre requête initiale renvoie maintenant.

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

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

Et Wallah ! Tout sexy et joli =)

Voilà donc comment supprimer les espaces entre les éléments/balises à la manière de jQuery.

nJoy !