Cách định dạng/gọn gàng/làm đẹp trong JavaScript

Question

Tôi có thể định dạng/gọn gàng/làm đẹp HTML bằng JavaScript như thế nào? I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly. Nhưng tất nhiên nó không tính đến khi JS hoặc CSS vv bên trong HTML.

Lý do tôi muốn làm điều này là tôi đã thực hiện một trình soạn thảo nội dung (CMS) có cả chế độ xem WYSIWYG và mã nguồn. Vấn đề mã được viết bởi trình soạn thảo WYSIWYG thường là một dòng duy nhất. Vì vậy, tôi muốn một JavaScript có thể định dạng hình ảnh này thành một dạng dễ đọc hơn theo yêu cầu.

Dưới đây là những gì tôi có cho đến nay:

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

Viết html trên cùng một dòng sẽ tải nhanh hơn cho trình duyệt, vì vậy tôi không chắc chắn tôi muốn nó được định dạng. Có thể là tùy chọn cho phiên bản được định dạng hoặc phiên bản được tối ưu hóa.

Đối với câu hỏi ... bạn có thể thực hiện cuộc gọi ajax sau quá nhiều thao tác và gửi mã đến máy chủ để định dạng và hiển thị trong một hộp khác trên màn hình. Về cơ bản, đây sẽ là phiên bản thời gian thực của trang web này, http://infohound.net/tidy/

Answer 2

Trình tạo jQuery John Resig viết nhanh và nhẹ HTML parser in javascript. Nếu bạn đang tìm kiếm một giải pháp mà bạn có thể thêm trực tiếp vào CMS của mình thì bạn có thể viết một trình làm đẹp đơn giản bằng cách sử dụng trình phân tích cú pháp này làm cơ sở. Tất cả bạn cần làm là reoutput các yếu tố bổ sung thêm không gian và ngắt dòng như bạn muốn, bằng cách sử dụng được xây dựng trong api:

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

Một thêm lợi ích của phương pháp này là bạn có thể sử dụng HTMLParser cùng đọc HTML quay lại WYSIWYG của bạn hoặc tương tác với cây HTML của người dùng của bạn. HTMLParser cũng được dựng sẵn với một phương thức HTMLtoDOM.

Answer 3

Tôi tin rằng cả công cụ hiển thị mã gỡ lỗi của Chrome và Firebug đều được viết bằng JS. Đó có thể là nhiệm vụ nặng nề hơn bạn thực sự muốn được rối tung với mặc dù.

Answer 4

@lovasoa How to format/tidy/beautify in JavaScript là giải pháp tuyệt vời.
đá rắn, tốt hơn nhiều so vkBeautify hoặc thậm chí CodeMirror (khó có thể sử dụng bộ xử lý AMD) và RẤT dễ

<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

formatter Resig của thất bại với một trường hợp thử nghiệm rất đơn giản:

tại http://ejohn.org/apps/htmlparser/

trong hộp nhập liệu nhập:

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

hộp đầu ra hiển thị:

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

Answer 6

Bạn cũng có thể sử dụng một công cụ dòng lệnh nếu bạn có cài đặt Node.js

chạy npm install -g uglify-js để cài đặt uglifyjs trên toàn cầu, kiểm tra here cho tài liệu.

Sau đó, bạn có thể uglify index.min.js -b -o index.js