怎么在 JavaScript 中对 json 和 xml 进行格式化

对于在JavaScript中对JSON和XML进行格式化，主要手段包括使用内置函数、引入第三方库、手动编写格式化函数等。这些方法能有效地管理和优化数据的显示方式，提高可读性和后续的数据处理效率。最常用的方法是利用JavaScript内置的JSON对象的stringify方法来格式化JSON，而对于XML，虽然没有内置的格式化工具，但可以通过DOM解析和操作来实现格式化。

在深入讨论之前，特别强调JSON的stringify方法。这个方法不仅能将JavaScript对象序列化为字符串，还可以通过其第二个参数（replacer）和第三参数（space）来美化输出的格式。其中，space参数可以控制结果字符串中的空白符数量，从而使输出的JSON字符串更加易于阅读。

一、JSON格式化方法

使用JSON.stringify

在JavaScript中，最简单直接的格式化JSON数据的方式是使用JSON.stringify方法。这个方法可以接受三个参数：要序列化的值、一个替代者函数或数组、以及用于控制缩进的数值或字符串。当需要格式化JSON数据时，可以特别利用第三个参数来控制缩进，从而达到格式化的效果。

let data = { name: "John", age: 30 };

let formattedJson = JSON.stringify(data, null, 4);
console.log(formattedJson);

使用第三方库

尽管原生的JSON.stringify方法在多数情况下都十分有效，但对于一些特别的需求，例如需要高度定制的格式化，第三方库如json-beautify、prettyjson等则可以提供更多的灵活性和功能。这些库通常提供了额外的定制选项，如自定义颜色、排序键值对等。

二、XML格式化方法

DOM操作

由于JavaScript本身并不提供直接格式化XML字符串的内置方法，因此格式化XML通常需要一些额外的步骤。一种方法是通过DOM Parser将XML字符串解析成DOM对象，然后递归遍历DOM树并构建出格式化的字符串。

function formatXml(xml) {

    let formatted = '';
    let reg = /(>)(<)(\/*)/g;
    xml = xml.replace(reg, '$1\r\n$2$3');
    let pad = 0;
    jQuery.each(xml.split('\r\n'), function(index, node) {
        let 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;
        }
        let padding = '';
        for (let i = 0; i < pad; i++) {
            padding += '  ';
        }
        formatted += padding + node + '\r\n';
        pad += indent;
    });
    return formatted;
}

使用第三方库

和JSON一样，也有许多第三方库可用于格式化XML数据。例如，xml-formatter库提供了一个简易的接口来格式化XML字符串，包括配置缩进大小、去除不需要的空格等。

const formatter = require('xml-formatter');

let xml = '<root><name>John</name></root>';
let formattedXml = formatter(xml, {indentation: '  '});
console.log(formattedXml);

三、手动编写格式化函数

尽管内置方法和第三方库在大多数场景下都十分实用，但在某些场合下，编写自定义的格式化函数能提供最大的灵活性。通过编写自定义的格式化逻辑，可以精确控制数据的格式化细节，包括但不限于键值对的排序、特殊字符的处理等。

自定义JSON格式化函数

自定义JSON格式化函数通常涉及递归遍历对象或数组，并对每个键值对进行处理。这种方法可以实现非常特定的格式化需求，但要注意处理好数据循环引用的情况。

自定义XML格式化函数

类似地，编写自定义的XML格式化函数可能需要解析XML字符串，然后构建适当的缩进和换行规则。这种方法的难度较大，尤其是需要充分考虑XML的嵌套结构和属性处理等细节。

四、总结

格式化JSON和XML数据在日常的前端开发工作中是一项基本而重要的技能。无论是使用内置方法、第三方库还是手动编写格式化函数，重要的是选择最适合当前项目需求的方法。在处理复杂的数据结构时，合适的格式化可以极大地提高数据的可读性和后续处理的效率。

相关问答FAQs：

如何在 JavaScript中对json数据进行格式化？

在JavaScript中，你可以使用JSON.stringify()方法对JSON数据进行格式化。这个方法可以将一个JSON对象转换为格式化后的字符串。例如：

let jsonData = { name: 'John', age: 25, city: 'New York' };
let formattedJson = JSON.stringify(jsonData, null, 2);
console.log(formattedJson);

这会将jsonData对象转换为格式化后的字符串，使其易于阅读和理解。

如何在JavaScript中对XML进行格式化？

要在JavaScript中对XML进行格式化，你可以使用DOMParser对象解析XML并重新构建它。以下是一个示例：

let xmlString = "<book><title>The Great Gatsby</title><author>F. Scott Fitzgerald</author></book>";

let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString, "text/xml");

let formattedXml = new XMLSerializer().serializeToString(xmlDoc);
console.log(formattedXml);

首先，我们使用DOMParser对象将XML字符串解析为XML文档对象。然后，我们使用XMLSerializer对象将XML文档对象重新序列化为格式化的XML字符串。

在JavaScript中如何同时对JSON和XML进行格式化？

要同时对JSON和XML进行格式化，你可以将两种格式分别转换为格式化的字符串，并将它们合并在一起。以下是一个示例：

let jsonData = { name: 'John', age: 25, city: 'New York' };
let formattedJson = JSON.stringify(jsonData, null, 2);

let xmlString = "<book><title>The Great Gatsby</title><author>F. Scott Fitzgerald</author></book>";
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString, "text/xml");
let formattedXml = new XMLSerializer().serializeToString(xmlDoc);

let formattedData = `JSON:\n${formattedJson}\n\nXML:\n${formattedXml}`;
console.log(formattedData);

这会将格式化的JSON字符串和格式化的XML字符串合并在一起，并在输出时添加适当的标记以区分两者。这样你就可以同时对JSON和XML数据进行格式化，并进行比较或展示了。