number - Cómo formatear/ordenar/embellecer en JavaScript

javascript format string

Question

¿Cómo puedo formatear / ordenar / embellecer HTML en JavaScript? He intentado hacer una búsqueda / reemplazo para corchetes angulares ( < , > ) y he tallar en consecuencia. Pero, por supuesto, no tiene en cuenta cuando el es JS o CSS, etc. dentro del HTML.

El motivo por el que quiero hacer esto es crear un editor de contenidos (CMS) que tenga vistas WYSIWYG y código fuente. 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

@lovasoa Cómo formatear / ordenar / embellecer en JavaScript es una excelente solución.
sólido como una roca, mucho mejor que vkBeautify o incluso CodeMirror (AMD difícil de usar) 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 2

Creo que los motores de visualización de 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 3

El creador de jQuery, John Resig, escribió un analizador HTML rápido y liviano en javascript . 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 necesita hacer es volver a publicar los elementos agregando espacios y saltos de línea como desee, utilizando la API integrada:

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

Un beneficio adicional de este enfoque es que puede usar el mismo HTMLParser para leer HTML de nuevo en su WYSIWYG, o de lo contrario, interactuar con el árbol HTML de su usuario. HTMLParser también viene precompilado con un método HTMLtoDOM.

Answer 4

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

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

en el cuadro de entrada, ingrese:

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

renderizado de cuadro de salida:

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

Answer 5

Escribir el html en una línea se descargaría más rápido al navegador, por lo que no estoy seguro de querer formatearlo. Tal vez una opción para una versión formateada o una versión optimizada.

En cuanto a la pregunta ... usted podría 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 6

También puede usar una herramienta de línea de comando si tiene la instalación de node.js

Ejecute npm install -g uglify-js para instalar uglifyjs globalmente, revise here documentación.

Entonces puedes uglify index.min.js -b -o index.js