Довольно печатать XML с помощью JavaScript - PullRequest
Новая
       54

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

113 голосов
/ 18 декабря 2008

У меня есть строка, представляющая 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-фреймворки и / или плагины, которые могут сделать эту работу, приветствуются. Мое единственное требование - это делать на стороне клиента.

Ответы [ 19 ]

4 голосов
/ 18 декабря 2008

как насчет создания узла-заглушки (document.createElement ('div') - или с использованием вашего библиотечного эквивалента), заполнения его строкой xml (через innerHTML) и вызова простой рекурсивной функции для корневого элемента / или элемента-заглушки в случае, если у вас нет рута. Функция будет вызывать себя для всех дочерних узлов.

Затем можно было бы выделить синтаксис по пути, чтобы убедиться, что разметка правильно сформирована (выполняется автоматически браузером при добавлении через innerHTML) и т. Д. Это не было бы так много кода и, вероятно, достаточно быстро.

2 голосов
/ 15 июля 2018

Вы можете получить довольно отформатированный XML с помощью xml-beautify 

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

отступ : шаблон отступа как пробелы

useSelfClosingElement : true => использовать самозакрывающийся элемент, когда пустой элемент.

JSFiddle

Оригинал (до) 

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

Приукрашена (После) * * тысяча двадцать-один 

<?xml version="1.0" encoding="utf-8"?>
<example version="2.0">
  <head>
    <title>Original aTitle</title>
  </head>
  <body info="none" />
</example>
2 голосов
/ 27 октября 2010 
Or just print out the special HTML characters?

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


&#09;   Horizontal tab  
&#10;   Line feed
2 голосов
/ 24 июня 2010 
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';
2 голосов
/ 19 июля 2016

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

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

XMLSpectrum formatted XML

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

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

2 голосов
/ 03 июля 2014

Используйте метод выше для красивой печати, а затем добавьте его в любой div, используя метод jquery text () . например, идентификатор div равен xmldiv, затем используйте:

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

1 голос
/ 03 августа 2017

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

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

1 голос
/ 25 октября 2013 
var reg = /(>)\s*(<)(\/*)/g;
xml = xml.replace(/\r|\n/g, ''); //deleting already existing whitespaces
xml = xml.replace(reg, '$1\r\n$2$3');
Страница:
...