Cómo formatear/ordenar/embellecer en JavaScript

Question

¿Cómo puedo formatear/ordenar/embellecer HTML en JavaScript? I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly. Pero, por supuesto, no tiene en cuenta cuando es JS o CSS, etc. dentro del HTML.

La razón por la que quiero hacer esto es que he creado un editor de contenido (CMS) que tiene vistas de código fuente y WYSIWYG. El problema es que el código escrito por el editor WYSIWYG normalmente es una sola línea. Entonces me gustaría un JavaScript que pueda formatear esto en una forma más legible bajo demanda.

Aquí lo que tengo hasta ahora:

function getIndent(level) { 
    var result = '', 
     i = level * 4; 
    if (level < 0) { 
     throw "Level is below 0"; 
    } 
    while (i--) { 
     result += ' '; 
    } 
    return result; 
} 

function style_html(html) { 
    html = html.trim(); 
    var result = '', 
     indentLevel = 0, 
     tokens = html.split(/</); 
    for (var i = 0, l = tokens.length; i < l; i++) { 
     var parts = tokens[i].split(/>/); 
     if (parts.length === 2) { 
      if (tokens[i][0] === '/') { 
       indentLevel--; 
      } 
      result += getIndent(indentLevel); 
      if (tokens[i][0] !== '/') { 
       indentLevel++; 
      } 

      if (i > 0) { 
       result += '<'; 
      } 

      result += parts[0].trim() + ">\n"; 
      if (parts[1].trim() !== '') { 
       result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n"; 
      } 

      if (parts[0].match(/^(img|hr|br)/)) { 
       indentLevel--; 
      } 
     } else { 
      result += getIndent(indentLevel) + parts[0] + "\n"; 
     } 
    } 
    return result; 
} 

Answer 1

Escribiendo la línea html en una descargaría más rápido al navegador, así que no estoy seguro de que me gustaría que se formatea. Tal vez una opción para una versión formateada o una versión optimizada.

En cuanto a la pregunta ... puede hacer una llamada ajax después de tantas acciones y enviar el código al servidor para formatearlo y mostrarlo en un cuadro diferente en la pantalla. Básicamente sería una versión en tiempo real de este sitio, http://infohound.net/tidy/

Answer 2

jQuery creador John Resig escribió un HTML parser in javascript rápido y liviano. Si está buscando una solución que pueda agregar directamente a su CMS, puede escribir un embellecedor simple usando este analizador como base. Todo lo que se necesita hacer es reoutput los elementos añadiendo espacios y saltos de línea que desee, utilizando el construido en la API:

HTMLParser(htmlString, { 
    start: function(tag, attrs, unary) {}, 
    end: function(tag) {}, 
    chars: function(text) {}, 
    comment: function(text) {} 
}); 

Un beneficio adicional de este enfoque es que se puede utilizar el mismo HTMLParser para leer HTML vuelva a su WYSIWYG, o interactúe de otra manera con el árbol HTML de su usuario. HTMLParser también viene precompilado con un método HTMLtoDOM.

Answer 3

Creo que los motores de visualización del código de depuración tanto de chrome como de firebug están escritos en JS. Sin embargo, ese es probablemente un trabajo más pesado de lo que realmente quieres estar jugando.

Answer 4

@lovasoa How to format/tidy/beautify in JavaScript es una excelente solución.
sólida, mucho mejor que vkBeautify o incluso CodeMirror (difícil de usar AMD) y muy fácil

<script src='http://lovasoa.github.io/tidy-html5/tidy.js'></script> 
<script> 
    options = { 
    "indent":"auto", 
    "indent-spaces":2, 
    "wrap":80, 
    "markup":true, 
    "output-xml":false, 
    "numeric-entities":true, 
    "quote-marks":true, 
    "quote-nbsp":false, 
    "show-body-only":true, 
    "quote-ampersand":false, 
    "break-before-br":true, 
    "uppercase-tags":false, 
    "uppercase-attributes":false, 
    "drop-font-tags":true, 
    "tidy-mark":false 
} 

var html = document.querySelector("body").outerHTML; 
var result = tidy_html5(html, options); 
console.log(result); 
</script> 

Answer 5

formateador de Resig falla con un caso de prueba muy simple:

en http://ejohn.org/apps/htmlparser/

en el cuadro de entrada introduzca: hace

<script src="/files/htmlparser.js"></script> 
<script> 
var x = 1; 
</script> 

caja de salida:

<script src="/files/htmlparser.js"></script> 
<script></script> 
var x = 1; 

Answer 6

También puede utilizar una herramienta de línea de comandos si tiene Node.js instalar

plazo npm install -g uglify-js instalar uglifyjs a nivel mundial, comprobar here para la documentación.

A continuación, puede uglify index.min.js -b -o index.js