XML Formatting in Vue

by Naresh

HTML

<div id="app">
  <pre>{{ formatXml() }}</pre>
</div>

Vue

new Vue({
  el: "#app",
  methods: {
  	methods: {
      formatXml() {
        let xml = "<foo<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>";
        let formatted = "";
        let reg = /(>)(<)(\/*)/g;
        let pad = 1;
        xml = xml.replace(reg, "$1\r\n$2$3");

        xml.split("\r\n").forEach(function (node) {
          let indent = 0;

          if (node.match(/.+<\/\w[^>]*>$/)) {
            // Matches opening tab
            indent = 0;
          } else if (node.match(/^<\/\w/)) {
            // Matches the content between opening and closing tags
            if (pad != 0) {
              pad -= 1;
            }
          } else if (node.match(/^<\w[^>]*[^/]>.*$/)) {
            // Matches closing tab
            indent = 1;
          } else {
            indent = 0;
          }

          let padding = "";

          for (let i = 0; i < pad; i++) {
            padding += "  ";
          }

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

        return formatted;
      }
    }
  }
})