Jak sformatować/uporządkować/upiększyć w JavaScript?

Question

Jak mogę sformatować/uporządkować/upiększyć HTML w JavaScript? I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly. Ale oczywiście nie bierze pod uwagę, kiedy jest JS lub CSS itp. Wewnątrz HTML.

Powodem, dla którego chcę to zrobić, jest edytor treści (CMS), który ma zarówno WYSIWYG, jak i widoki kodu źródłowego. Problem w tym, że kod napisany przez edytor WYSIWYG jest zwykle pojedynczą linią. Więc chciałbym JavaScript, który mógłby sformatować to na bardziej czytelną formę na żądanie.

Oto co mam do tej pory:

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

Pisanie html w jednej linii by pobrać szybciej do przeglądarki, więc nie jestem pewien, czy chcę go sformatować. Może opcja dla wersji sformatowanej lub zoptymalizowanej.

Jeśli chodzi o pytanie ... można wykonać wywołanie ajax po tylu akcjach i wysłać kod do serwera, który ma być sformatowany i wyświetlony w innym polu na ekranie. Zasadniczo byłoby to w czasie rzeczywistym wersja tej strony, http://infohound.net/tidy/

Answer 2

twórca jQuery John Resig napisał szybki i lekki HTML parser in javascript. Jeśli szukasz rozwiązania, które możesz dodać bezpośrednio do swojego CMS, możesz napisać prosty upiększacz, używając tego parsera jako bazy. Wszystko trzeba by zrobić, to reoutput elementów dodających spacje i podziały wiersza, jak chcesz, za pomocą wbudowanego w API:

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

Dodatkową zaletą tego podejścia jest to, że można używać tego samego HTMLParser czytać HTML z powrotem do swojego WYSIWYG lub w inny sposób wchodzić w interakcje z drzewem HTML użytkownika. HTMLParser jest również wstępnie skonstruowany za pomocą metody HTMLtoDOM.

Answer 3

Uważam, że zarówno chrome, jak i firebugowskie mechanizmy wyświetlania kodu są napisane w JS. To prawdopodobnie większy obowiązek, niż naprawdę chcesz się z tym pogodzić.

Answer 4

@lovasoa How to format/tidy/beautify in JavaScript to doskonałe rozwiązanie.
solidnym, dużo lepiej niż vkBeautify lub nawet CodeMirror (trudno użyć AMD) i bardzo łatwe

<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

formater Resig nie powiedzie się z bardzo prostego testu:

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

w pole wejściowe wpisać:

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

box wyjście renderuje:

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

Answer 6

Można również użyć narzędzia wiersza poleceń, jeśli masz node.js zainstalować

bieg npm install -g uglify-js zainstalować uglifyjs globalnie, sprawdź here dokumentacji.

Następnie można uglify index.min.js -b -o index.js