javascript - linea - Elimine el espacio en blanco y los saltos de línea entre elementos HTML usando jQuery

salto de linea usando css

Question

Usando jQuery, me gustaría eliminar el espacio en blanco y los saltos de línea entre etiquetas HTML.

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

Debiera ser:

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

Creo que el patrón que necesitaré es:

>[/s]*<

¿Se puede lograr esto sin usar expresiones regulares?

Answer 1

Creo que esto lo hará ...

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 2

Esto es lo que funcionó para mí y el descubrimiento paso a paso:

La salida es desde la consola de Chrome

Primero locato al nodo padre que contiene el desagradable espacio en blanco

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

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

Puede ver que está envuelto en una matriz de los corchetes [] jQuery siempre devolverá una estructura similar a una matriz, incluso cuando se haya encontrado un solo elemento.

Entonces, para llegar al HTMLElement, tomamos el primer elemento en el conjunto en el índice 0

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

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

Tenga en cuenta que no hay más [] corchetes. La razón por la que necesitamos hacer esto es porque jQuery ignorará el espacio en blanco en el dom pero HTMLElement no lo hará, mira lo que sucede cuando accedemos a la propiedad childNodes

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

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

Tenemos una matriz de nuevo, sí se detectan los corchetes [], pero ¿ves otra diferencia ?, mira todas las comas que no pudimos obtener con jQuery. Gracias HTMLElement pero ahora podemos volver a jQuery porque quiero usar cada uno en lugar de un ciclo for, ¿estás de acuerdo conmigo? Así que vamos a envolver la matriz en jQuery y ver qué sucede:

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

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

¡Perfecto! tenemos exactamente la misma estructura pero ahora dentro de un objeto jQuery, así que llamemos a cada uno e imprimamos "esto" a la consola para ver lo que tenemos.

$($(''.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|

Así que usamos jQuery para obtener el html de cada elemento, el material estándar `$ (this) .html y porque no podemos ver el espacio en blanco, lo abrimos con un pipe |, buen plan, pero ¿qué tenemos aquí? Como puede ver, jQuery no puede convertir el espacio en blanco en html y ahora no tenemos definido. Pero esto es aún mejor porque cuando un espacio puede ser verdad indefinido definitivamente es falso =)

Así que vamos a deshacernos de los retoños con jQuery. Todo lo que necesitamos es $(this).html() || $(this).remove(); $(this).html() || $(this).remove(); veamos:

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

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

Oh querido ... ¡pero no temas! Cada uno devuelve la estructura anterior, no la que hemos cambiado, veamos qué devuelve nuestra consulta inicial ahora.

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

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

¡Y Wallah! Todo sexy y bonito =)

Así que ahí lo tienes, cómo eliminar espacios en blanco entre elementos / etiquetas estilo jQuery ala.

nJoy!

Answer 3

Podrías $.trim(widgetHTML); para leer sobre el espacio en blanco circundante.

Answer 4

Probé la técnica que el usuario76888 presentó y funcionó bien. Lo empaqué en un plugin jQuery por conveniencia, y pensé que la comunidad podría disfrutarlo, así que aquí:

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

Para usar esto, simplemente inclúyalo en una etiqueta de script, luego seleccione una etiqueta para limpiar con jQuery y llame a la función de la siguiente manera:

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

Answer 5

Probablemente puedas hacer esto mejor después de configurar HTML en un nodo DOM. Una vez que el navegador haya analizado todo y construido un árbol DOM fuera de nuestro marcado, puede hacer una caminata DOM y para cada nodo de texto que encuentre, elimínelo por completo si no tiene caracteres que no sean de espacio en blanco, o recorte el espacio en blanco del inicio y al final si es así.

Answer 6

Tuve que modificar un poco la respuesta aceptada porque, por algún motivo, Chrome no quería eliminar a Child () en los nodos de espacio en blanco. Si esto sucede, podría reemplazar el nodo con un nodo de texto vacío como en este ejemplo de función auxiliar:

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

Toma un nodo del que desea eliminar espacios en blanco y reemplaza recursivamente todos los espacios en blanco con un texto realmente vacío.

Answer 7

Una versión recursiva:

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 8

Utilizar

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