web-dev-qa-db-fra.com

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

En utilisant jQuery, je voudrais supprimer les espaces et les sauts de ligne entre les balises HTML.

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

Devrait être:

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

Je pense que le schéma dont j'ai besoin est le suivant:

>[\s]*<

Cela peut-il être accompli sans utiliser l'expression régulière?

javascriptjqueryregexstringreplace
39
mager

J'ai essayé la technique présentée par user76888 et cela a bien fonctionné. Je l'ai empaqueté dans un plugin jQuery pour plus de commodité, et j'ai pensé que la communauté pourrait en profiter, alors voici:

jQuery.fn.cleanWhitespace = function() {
    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 de script, puis sélectionnez une balise à nettoyer avec jQuery et appelez la fonction comme suit:

$('#widget').cleanWhitespace();
60
The Digital Gabeg

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

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

Vous pouvez probablement le faire mieux après avoir défini HTML dans un nœud DOM. Une fois que le navigateur a tout analysé et construit une arborescence DOM à partir de notre balisage, vous pouvez faire une promenade DOM et pour chaque nœud de texte que vous trouvez, supprimez-le complètement s'il n'a pas de caractères non blancs, ou supprimez les espaces blancs au début et la fin si c'est le cas.

2
levik

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

La sortie provient de la console chrome console

Premièrement locato le nœud parent contenant le blanc méchant

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

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

Vous pouvez voir que cela est enveloppé dans un tableau à partir des crochets [] jQuery retournera toujours une structure de type tableau même lorsqu'un seul élément a été trouvé.

Donc, pour arriver à 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 le faire 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 voyez-vous une autre différence, regardez toutes les virgules, que nous n'avons pas pu obtenir avec jQuery. Merci HTMLElement mais maintenant nous pouvons revenir à jQuery car je veux utiliser chacun au lieu d'une boucle for, êtes-vous d'accord avec moi? Permet donc 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, mais maintenant à l'intérieur d'un objet jQuery, nous pouvons donc appeler chacun et imprimer "ceci" sur 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|

Nous utilisons donc jQuery pour obtenir le html de chaque élément, le contenu standard `$ (this) .html et parce que nous ne pouvons pas voir d'espace blanc, nous pouvons le remplir avec un tuyau |, bon plan, mais qu'avons-nous ici? Comme vous pouvez le voir, jQuery n'est pas en mesure de transformer le blanc en html et nous avons maintenant undefined. Mais c'est encore mieux parce que là où un espace peut être véridique indéfini est définitivement faux =)

Permet donc de se débarrasser des drageons avec jQuery. Tout ce dont nous avons besoin est $(this).html() || $(this).remove(); permet de voir:

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

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

Oh chéri .. mais n'aie pas peur! Chacun retourne toujours la structure précédente pas 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 =)

Donc, vous l'avez, comment supprimer les espaces entre les éléments/balises ala style jQuery.

nJoy!

2
nickl-

J'ai dû modifier un peu la réponse acceptée car pour une raison quelconque chrome ne voulait pas supprimer Child () sur les nœuds d'espaces. Si cela se produit, vous pouvez remplacer le nœud par un nœud de texte vide comme dans cet exemple de fonction d'assistance:

 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 nœud dont vous souhaitez supprimer les espaces et récursivement remplace tous les enfants d'espaces par un nœud de texte vraiment vide.

1
Quickredfox

Utilisation

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