In XML đẹp bằng javascript

Tôi có một chuỗi đại diện cho một XML không thụt lề mà tôi muốn in đẹp. Ví dụ:

<root><node/></root>

nên trở thành:

<root>
  <node/>
</root>

Làm nổi bật cú pháp không phải là một yêu cầu. Để giải quyết vấn đề, trước tiên tôi chuyển đổi XML để thêm lợi nhuận vận chuyển và khoảng trắng và sau đó sử dụng thẻ trước để xuất XML. Để thêm dòng mới và khoảng trắng tôi đã viết hàm sau:

function formatXml(xml) {
    var formatted = '';
    var reg = /(>)(<)(\/*)/g;
    xml = xml.replace(reg, '$1\r\n$2$3');
    var pad = 0;
    jQuery.each(xml.split('\r\n'), function(index, node) {
        var indent = 0;
        if (node.match( /.+<\/\w[^>]*>$/ )) {
            indent = 0;
        } else if (node.match( /^<\/\w/ )) {
            if (pad != 0) {
                pad -= 1;
            }
        } else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
            indent = 1;
        } else {
            indent = 0;
        }

        var padding = '';
        for (var i = 0; i < pad; i++) {
            padding += '  ';
        }

        formatted += padding + node + '\r\n';
        pad += indent;
    });

    return formatted;
}

Sau đó tôi gọi hàm như thế này:

jQuery('pre.formatted-xml').text(formatXml('<root><node1/></root>'));

Điều này hoạt động hoàn toàn tốt cho tôi nhưng trong khi tôi đang viết chức năng trước đó tôi nghĩ rằng phải có một cách tốt hơn. Vì vậy, câu hỏi của tôi là bạn có biết cách nào tốt hơn được cung cấp một chuỗi XML để in nó trong một trang html không? Bất kỳ khung javascript và / hoặc plugin nào có thể thực hiện công việc đều được chào đón. Yêu cầu duy nhất của tôi là điều này phải được thực hiện ở phía khách hàng.

Từ văn bản của câu hỏi, tôi có ấn tượng rằng một kết quả chuỗi được mong đợi , trái ngược với kết quả được định dạng HTML.

Nếu đúng như vậy, cách đơn giản nhất để đạt được điều này là xử lý tài liệu XML bằng cách chuyển đổi danh tính và bằng một <xsl:output indent="yes"/>hướng dẫn :

<xsl: bản định kiểu = "1.0"
 xmlns: xsl = "http://www.w3.org/1999/XSL/Transform">
 <xsl: output omit-xml-kê khai = "yes" indent = "yes" />

    <xsl: template match = "node () | @ *">
      <xsl: sao chép>
        <xsl: application-samples select = "node () | @ *" />
      </ xsl: sao chép>
    </ xsl: mẫu>
</ xsl: biểu định kiểu>

Khi áp dụng chuyển đổi này trên tài liệu XML được cung cấp:

<root> <nút /> </ root>

hầu hết các bộ xử lý XSLT (.NET XslCompiledTransform, Saxon 6.5.4 và Saxon 9.0.0.2, AltovaXML) tạo ra kết quả mong muốn:

<root>
  <nút />
</ root>

Sửa đổi nhẹ chức năng javascript của efnx clckclcks. Tôi đã thay đổi định dạng từ dấu cách sang tab, nhưng quan trọng nhất là tôi cho phép văn bản duy trì trên một dòng:

var formatXml = this.formatXml = function (xml) {
        var reg = /(>)\s*(<)(\/*)/g; // updated Mar 30, 2015
        var wsexp = / *(.*) +\n/g;
        var contexp = /(<.+>)(.+\n)/g;
        xml = xml.replace(reg, '$1\n$2$3').replace(wsexp, '$1\n').replace(contexp, '$1\n$2');
        var pad = 0;
        var formatted = '';
        var lines = xml.split('\n');
        var indent = 0;
        var lastType = 'other';
        // 4 types of tags - single, closing, opening, other (text, doctype, comment) - 4*4 = 16 transitions 
        var transitions = {
            'single->single': 0,
            'single->closing': -1,
            'single->opening': 0,
            'single->other': 0,
            'closing->single': 0,
            'closing->closing': -1,
            'closing->opening': 0,
            'closing->other': 0,
            'opening->single': 1,
            'opening->closing': 0,
            'opening->opening': 1,
            'opening->other': 1,
            'other->single': 0,
            'other->closing': -1,
            'other->opening': 0,
            'other->other': 0
        };

        for (var i = 0; i < lines.length; i++) {
            var ln = lines[i];

            // Luca Viggiani 2017-07-03: handle optional <?xml ... ?> declaration
            if (ln.match(/\s*<\?xml/)) {
                formatted += ln + "\n";
                continue;
            }
            // ---

            var single = Boolean(ln.match(/<.+\/>/)); // is this line a single tag? ex. <br />
            var closing = Boolean(ln.match(/<\/.+>/)); // is this a closing tag? ex. </a>
            var opening = Boolean(ln.match(/<[^!].*>/)); // is this even a tag (that's not <!something>)
            var type = single ? 'single' : closing ? 'closing' : opening ? 'opening' : 'other';
            var fromTo = lastType + '->' + type;
            lastType = type;
            var padding = '';

            indent += transitions[fromTo];
            for (var j = 0; j < indent; j++) {
                padding += '\t';
            }
            if (fromTo == 'opening->closing')
                formatted = formatted.substr(0, formatted.length - 1) + ln + '\n'; // substr removes line break (\n) from prev loop
            else
                formatted += padding + ln + '\n';
        }

        return formatted;
    };

Điều này có thể được thực hiện bằng các công cụ javascript gốc, không có lib của bên thứ 3, mở rộng câu trả lời của @Dimitre Novatchev:

var prettifyXml = function(sourceXml)
{
    var xmlDoc = new DOMParser().parseFromString(sourceXml, 'application/xml');
    var xsltDoc = new DOMParser().parseFromString([
        // describes how we want to modify the XML - indent everything
        '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
        '  <xsl:strip-space elements="*"/>',
        '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
        '    <xsl:value-of select="normalize-space(.)"/>',
        '  </xsl:template>',
        '  <xsl:template match="node()|@*">',
        '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
        '  </xsl:template>',
        '  <xsl:output indent="yes"/>',
        '</xsl:stylesheet>',
    ].join('\n'), 'application/xml');

    var xsltProcessor = new XSLTProcessor();    
    xsltProcessor.importStylesheet(xsltDoc);
    var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
    var resultXml = new XMLSerializer().serializeToString(resultDoc);
    return resultXml;
};

console.log(prettifyXml('<root><node/></root>'));

Đầu ra:

<root>
  <node/>
</root>

Câu đố

Lưu ý, như được chỉ ra bởi @ jat255, in đẹp <xsl:output indent="yes"/>không được firefox hỗ trợ. Nó dường như chỉ hoạt động trong chrome, opera và có lẽ các trình duyệt dựa trên webkit còn lại.

Cá nhân, tôi sử dụng google-code-prettify với chức năng này:

prettyPrintOne('<root><node1><root>', 'xml')

Tìm thấy chủ đề này khi tôi có một yêu cầu tương tự nhưng tôi đã đơn giản hóa mã của OP như sau:

function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
    var formatted = '', indent= '';
    tab = tab || '\t';
    xml.split(/>\s*</).forEach(function(node) {
        if (node.match( /^\/\w/ )) indent = indent.substring(tab.length); // decrease indent by one 'tab'
        formatted += indent + '<' + node + '>\r\n';
        if (node.match( /^<?\w[^>]*[^\/]$/ )) indent += tab;              // increase indent
    });
    return formatted.substring(1, formatted.length-3);
}

làm việc cho tôi

Hoặc nếu bạn chỉ thích một chức năng js khác để làm điều đó, tôi đã sửa đổi Darin (rất nhiều):

var formatXml = this.formatXml = function (xml) {
    var reg = /(>)(<)(\/*)/g;
    var wsexp = / *(.*) +\n/g;
    var contexp = /(<.+>)(.+\n)/g;
    xml = xml.replace(reg, '$1\n$2$3').replace(wsexp, '$1\n').replace(contexp, '$1\n$2');
    var pad = 0;
    var formatted = '';
    var lines = xml.split('\n');
    var indent = 0;
    var lastType = 'other';
    // 4 types of tags - single, closing, opening, other (text, doctype, comment) - 4*4 = 16 transitions 
    var transitions = {
        'single->single'    : 0,
        'single->closing'   : -1,
        'single->opening'   : 0,
        'single->other'     : 0,
        'closing->single'   : 0,
        'closing->closing'  : -1,
        'closing->opening'  : 0,
        'closing->other'    : 0,
        'opening->single'   : 1,
        'opening->closing'  : 0, 
        'opening->opening'  : 1,
        'opening->other'    : 1,
        'other->single'     : 0,
        'other->closing'    : -1,
        'other->opening'    : 0,
        'other->other'      : 0
    };

    for (var i=0; i < lines.length; i++) {
        var ln = lines[i];
        var single = Boolean(ln.match(/<.+\/>/)); // is this line a single tag? ex. <br />
        var closing = Boolean(ln.match(/<\/.+>/)); // is this a closing tag? ex. </a>
        var opening = Boolean(ln.match(/<[^!].*>/)); // is this even a tag (that's not <!something>)
        var type = single ? 'single' : closing ? 'closing' : opening ? 'opening' : 'other';
        var fromTo = lastType + '->' + type;
        lastType = type;
        var padding = '';

        indent += transitions[fromTo];
        for (var j = 0; j < indent; j++) {
            padding += '    ';
        }

        formatted += padding + ln + '\n';
    }

    return formatted;
};

Tất cả các hàm javascript được cung cấp ở đây sẽ không hoạt động đối với tài liệu xml có khoảng trắng không xác định giữa thẻ kết thúc '>' và thẻ bắt đầu '<'. Để sửa chúng, bạn chỉ cần thay thế dòng đầu tiên trong các chức năng

var reg = /(>)(<)(\/*)/g;

bởi

var reg = /(>)\s*(<)(\/*)/g;

Còn việc tạo một nút sơ khai (document.createEuity ('div') - hoặc sử dụng thư viện của bạn tương đương), điền vào chuỗi xml (thông qua InternalHTML) và gọi hàm đệ quy đơn giản cho phần tử gốc / hoặc phần tử gốc trong trường hợp bạn không có gốc. Hàm sẽ tự gọi cho tất cả các nút con.

Sau đó, bạn có thể tô sáng cú pháp trên đường đi, chắc chắn rằng đánh dấu được hình thành tốt (được trình duyệt tự động thực hiện khi nối thêm qua InternalHTML), v.v. Nó sẽ không đủ mã và có thể đủ nhanh.

Nếu bạn đang tìm kiếm một giải pháp JavaScript, chỉ cần lấy mã từ công cụ Pretty Diff tại http://prettydiff.com/?m=beautify

Bạn cũng có thể gửi tệp đến công cụ bằng tham số s, chẳng hạn như: http://prettydiff.com/?m=beautify&s=https://stackoverflow.com/

var formatXml = this.formatXml = function (xml) {
        var reg = /(>)(<)(\/*)/g;
        var wsexp = / *(.*) +\n/g;
        var contexp = /(<.+>)(.+\n)/g;
        xml = xml.replace(reg, '$1\n$2$3').replace(wsexp, '$1\n').replace(contexp, '$1\n$2');
        var pad = 0;
        var formatted = '';
        var lines = xml.split('\n');
        var indent = 0;
        var lastType = 'other';

Or just print out the special HTML characters?

Ex: <xmlstuff>&#10; &#09;<node />&#10;</xmlstuff>   


&#09;   Horizontal tab  
&#10;   Line feed

XMLSpectrum định dạng XML, hỗ trợ thụt lề thuộc tính và cũng làm nổi bật cú pháp cho XML và bất kỳ biểu thức XPath nhúng nào:

XMLSpectrum là một dự án nguồn mở, được mã hóa trong XSLT 2.0 - vì vậy bạn có thể chạy phía máy chủ này với bộ xử lý như Saxon-HE (được khuyến nghị) hoặc phía máy khách sử dụng Saxon-CE.

XMLSpectrum chưa được tối ưu hóa để chạy trong trình duyệt - do đó khuyến nghị nên chạy phía máy chủ này.

Sử dụng phương thức trên cho bản in đẹp và sau đó thêm phần này vào bất kỳ div nào bằng cách sử dụng phương thức jquery text () . ví dụ id của div xmldivthì sử dụng:

$("#xmldiv").text(formatXml(youXmlString));

đây là một chức năng khác để định dạng xml

function formatXml(xml){
    var out = "";
    var tab = "    ";
    var indent = 0;
    var inClosingTag=false;
    var dent=function(no){
        out += "\n";
        for(var i=0; i < no; i++)
            out+=tab;
    }


    for (var i=0; i < xml.length; i++) {
        var c = xml.charAt(i);
        if(c=='<'){
            // handle </
            if(xml.charAt(i+1) == '/'){
                inClosingTag = true;
                dent(--indent);
            }
            out+=c;
        }else if(c=='>'){
            out+=c;
            // handle />
            if(xml.charAt(i-1) == '/'){
                out+="\n";
                //dent(--indent)
            }else{
              if(!inClosingTag)
                dent(++indent);
              else{
                out+="\n";
                inClosingTag=false;
              }
            }
        }else{
          out+=c;
        }
    }
    return out;
}

Bạn có thể nhận được xml được định dạng đẹp với xml-beautify

var prettyXmlText = new XmlBeautify().beautify(xmlText, 
                    {indent: "  ",useSelfClosingElement: true});

thụt lề : mô hình thụt lề như khoảng trắng

useSelfClosesEuity : true => sử dụng phần tử tự đóng khi phần tử trống.

Câu đố

Bản gốc (Trước)

<?xml version="1.0" encoding="utf-8"?><example version="2.0">
  <head><title>Original aTitle</title></head>
  <body info="none" ></body>
</example>

Làm đẹp (Sau)

<?xml version="1.0" encoding="utf-8"?>
<example version="2.0">
  <head>
    <title>Original aTitle</title>
  </head>
  <body info="none" />
</example>

var reg = /(>)\s*(<)(\/*)/g;
xml = xml.replace(/\r|\n/g, ''); //deleting already existing whitespaces
xml = xml.replace(reg, '$1\r\n$2$3');

Thư viện Xml-to-json có phương pháp formatXml(xml).Tôi là người duy trì dự án.

var prettyXml = formatXml("<a><b/></a>");

// <a>
//   <b/>
// </a>