2010-10-12 8 views
40

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.So formatieren/ordnen/verschönern Sie in JavaScript

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; 
} 
+0

manchmal die besten Fragen/Antworten sind Wegthema. – NilsB

+0

@ NilsB Müll Dies ist auf Thema, in der Tat war es bereits als Off-Thema geschlossen und dann wieder wieder geöffnet – Petah

+0

[Hier ist ultra-einfache HTML-Formatierer in JavaScript] (https://jsfiddle.net/buksy/rxucg1gd/) – Buksy

Antwort

0

die 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 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/

+1

Ja, es wäre immer etwas schneller (wie 0,0001 Sekunden). Aber wenn man bedenkt, dass ein WYSIWYG-Editor für Kunden gedacht ist, die nur wenig über HTML wissen, macht formatiertes HTML es viel einfacher. Auch in Bezug auf das Senden der Daten an den Server für die Formatierung ist das alles andere als ideal. – Petah

0

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.

0

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.

12

@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> 
+4

home http://www.htacg.org/tidy-html5/ --- github https://github.com/htacg/ --- Konfigurationsoptionen http://www.htacg.org/tidy- html5/quickref.html – rickdog

-2

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; 
+1

Und Sie haben diese Frage nicht beantwortet – blex

2

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

+0

Warum runter, das ist sehr einfach zu bedienen – nickleefly

+0

Mein Quess ist, weil Ihre Lösung für die Entwicklung ist und keine Laufzeit im Browser, die ich denke, ist Absicht. – user766304