Довольно печатать XML с помощью javascript



8 Answers

рассмотрим использование vkBeautify плагина

http://www.eslinstructor.net/vkbeautify/

это написано на простом javascript, очень маленьком: менее 1,5 К, если оно было уменьшено, очень быстро: менее 5 мс. для обработки 50K XML-текста.

Question

У меня есть строка, которая представляет собой XML без выраженного абзаца, который я бы хотел напечатать. Например:

<root><node/></root>

должны стать:

<root>
  <node/>
</root>

Выделение синтаксиса не является обязательным требованием. Чтобы решить проблему, я сначала преобразую XML, чтобы добавить возврат каретки и пробелы, а затем использовать pre тег для вывода XML. Чтобы добавить новые строки и пробелы, я написал следующую функцию:

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

Затем я вызываю функцию следующим образом:

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

Это работает отлично для меня, но когда я писал предыдущую функцию, я думал, что должен быть лучший способ. Так что мой вопрос: знаете ли вы, какой способ лучше использовать XML-строку, чтобы напечатать ее на html-странице? Любые фреймворки javascript и / или плагины, которые могли бы выполнять эту работу, приветствуются. Мое единственное требование - это сделать на стороне клиента.




https://www.npmjs.com/package/js-beautify

Эта библиотека работает для меня. Поддерживает вкладку, поддерживает веб-версию и версию узла. Также поддерживает JS, HTML, CSS. Также доступен как CDN.







Все функции javascript, приведенные здесь, не будут работать для XML-документа с неопределенными пробелами между конечным тегом '>' и стартовым тегом '<'. Чтобы исправить их, вам просто нужно заменить первую строку в функциях

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

от

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






XMLSpectrum форматы XML, поддерживает отступ атрибутов, а также выделяет синтаксис для XML и любых встроенных выражений XPath:

XMLSpectrum - проект с открытым исходным кодом, закодированный в XSLT 2.0, поэтому вы можете запустить эту серверную часть с процессором, например Saxon-HE (рекомендуется) или на стороне клиента, используя Saxon-CE.

XMLSpectrum еще не оптимизирован для работы в браузере - отсюда и рекомендация запуска этой серверной части.




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';



Personnaly, я использую google-code-prettify с помощью этой функции:

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



вот еще одна функция для форматирования 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;
}



Related