So formatieren/ordnen/verschönern Sie in JavaScript

Question

Wie kann ich HTML in JavaScript formatieren/aufräumen/verschönern? I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly. Aber natürlich berücksichtigt es nicht, wenn das JS oder CSS usw. im HTML ist.

Der Grund, warum ich dies tun möchte, ist, habe ich einen Inhaltseditor (CMS) gemacht, der sowohl WYSIWYG- als auch Quellcodeansichten hat. Das Problem der vom WYSIWYG-Editor geschriebene Code ist normalerweise eine einzelne Zeile. Daher möchte ich ein JavaScript, das dies bei Bedarf in eine besser lesbare Form formatieren kann.

Hier ist, was ich bisher:

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

die html auf eine Zeile schreiben würde sich schneller laden an den Browser, so bin ich nicht sicher, ob ich möchte es formatiert. Vielleicht eine Option für eine formatierte Version oder eine optimierte Version.

Wie für die Frage ... Sie könnten einen ajax Anruf nach so vielen Aktionen tun und senden Sie den Code an den Server formatiert und in einer anderen Box auf dem Bildschirm angezeigt. Im Grunde wäre es eine Echtzeit-Version dieser Website, http://infohound.net/tidy/

Answer 2

jQuery Schöpfer John Resig schrieb eine schnelle und leichte HTML parser in javascript. Wenn Sie nach einer Lösung suchen, die Sie direkt zu Ihrem CMS hinzufügen können, dann könnten Sie einen einfachen Beautifier schreiben, der diesen Parser als Basis verwendet. Alles, was Sie die Elemente tun bräuchten Leerzeichen und Zeilenumbrüche ist reoutput Zugabe, wie Sie möchten, die in api gebaut mit:

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

Ein weiterer Vorteil dieses Ansatzes ist, dass Sie die gleiche HTMLParser HTML zu lesen verwenden könnte zurück in Ihren WYSIWYG oder anderweitig mit dem HTML-Baum Ihres Benutzers interagieren. HTMLParser wird auch mit einer HTMLtoDOM-Methode vorgefertigt.

Answer 3

Ich glaube, dass sowohl die Debug-Code-Display-Engines von Chrome und Firebug in JS geschrieben sind. Das ist wahrscheinlich eine schwerere Aufgabe, als du wirklich damit verbringen willst.

Answer 4

@lovasoa How to format/tidy/beautify in JavaScript ist eine ausgezeichnete Lösung.
rock-solid, viel besser als vkBeautify oder sogar Codemirror (hart AMD zu verwenden) und sehr einfach

<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

Resig Formatierer mit einem sehr einfachen Testfall versagt:

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

in das Eingabefeld eingeben:

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

Ausgangsbox rendert:

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

Answer 6

Sie können auch ein Kommandozeilen-Tool verwenden, wenn Sie

Lauf npm install -g uglify-js node.js installieren uglifyjs global zu installieren, überprüfen here für die Dokumentation.

Dann können Sie uglify index.min.js -b -o index.js