84 votos

Cómo normalizar HTML en JavaScript o jQuery?

Las etiquetas pueden tener varios atributos. El orden en el que los atributos aparecen en el código no importa. Por ejemplo:

<a href="#" title="#">
<a title="#" href="#">

¿Cómo puedo "normalizar" el HTML en Javascript, por lo que el orden de los atributos es siempre el mismo? No me importa en que orden es elegido, el tiempo es siempre el mismo.

ACTUALIZACIÓN: mi meta original era hacer más fácil el diff (en JavaScript) 2 páginas HTML con ligeras diferencias. Debido a que los usuarios pueden utilizar diferentes programas para modificar el código, la orden de los atributos podrían cambiar. Esto hace que el diff demasiado detallado.

RESPUESTA: Bueno, primero gracias por todas las respuestas. Y SÍ, es posible. Aquí es cómo me las he arreglado para hacerlo. Esta es una prueba de concepto, que sin duda puede ser optimizado:

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
}

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.push(attributes[i]);
    }

    list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

    for(var i = 0; i < list.length; i++) {
      this.setAttribute(list[i].name, list[i].value);
    }
  }
});

Lo mismo para el segundo elemento de la diferencia, $('#different'). Ahora, $('#original').html() y $('#different').html() mostrar código HTML con atributos en el mismo orden.

68voto

Tung Nguyen Puntos 2387

JavaScript en realidad no ver una página web en el formulario de HTML basado en texto, sino más bien como una estructura de árbol conocido como el árbol DOM, o Modelo de Objeto de Documento. El orden de los atributos de los elementos HTML en la DOM no está definido (de hecho, como Svend comentarios, incluso no son parte de la DOM), por lo que la idea de la clasificación en el punto en que JavaScript se ejecuta es irrelevante.

Sólo puedo imaginar lo que estamos tratando de lograr. Si usted está tratando de hacer esto para mejorar JavaScript/rendimiento de la página, la mayoría de documento HTML representadores ya presumiblemente poner un montón de esfuerzo en la optimización de atributo de acceso, por lo que hay poco que ganar allí.

Si usted está tratando de pedir atributos para que la compresión gzip de las páginas más efectiva, ya que son enviados a través del cable, entender que JavaScript se ejecuta después de ese punto en el tiempo. En su lugar, es posible que desee buscar en las cosas que se ejecutan del lado del servidor en lugar de eso, aunque es probable que sea más problemas de lo que vale.

35voto

Kim Bruning Puntos 251

Tome el HTML y analizar en una estructura DOM. Luego tomar la estructura DOM, y escribir de nuevo a HTML. Mientras escribía, ordenar los atributos utilizando cualquier tipo estable. Tu HTML ahora se normalizó con respecto a los atributos.

Esta es una manera general, para normalizar las cosas. (Analizar los datos no normalizados, a continuación, escribir de nuevo en forma normalizada).

No estoy seguro de por qué te gustaría para Normalizar HTML, pero ahí lo tienen. Los datos son datos. ;-)

12voto

Julien Puntos 2256

Esta es una prueba de concepto, sin duda puede ser optimizado:

 function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
 }

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.push(attributes[i]);
    }

     list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

     for(var i = 0; i < list.length; i++) {
       this.setAttribute(list[i].name, list[i].value);
    }
  }
 });
 

Lo mismo para el segundo elemento del diff, $ ('# diferente "). Ahora $ ('# original »). Html () y $ (' # diferente '). Html () mostrar código HTML con atributos en el mismo orden.

8voto

tsurahman Puntos 799

puedes probar ficha HTML abierta en firebug, los atributos son siempre en mismo orden

5voto

Benjamin Franz Puntos 678

En realidad, creo que un par de buenas razones. Uno podría ser la comparación de la identidad de coincidencia y para su uso con 'diff' tipo de herramientas donde es bastante molesto que semánticamente equivalente líneas pueden ser marcados como "diferentes".

La verdadera pregunta es "¿por Qué en Javascript"?

Esta cuestión de los "olores" de "tengo un problema y creo que tengo una respuesta...pero tengo un problema con mi respuesta, también."

Si el OP explicaría por qué quieren hacer esto, sus posibilidades de obtener una buena respuesta sería subir drásticamente.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X