javascript - 如何解析具有类似 XML 结构的文件，但在内容旁边带有自闭合标签(而不是包含内容)

Question

我有一个具有以下结构的文件。它不是 XML，但我需要以某种方式将其生成 JSON。

所以虽然我希望文件看起来像这样:

<chapter>
<line> Some text which I want to grab. </line>
<line> Some more text which I want to grab. </line>
<line> Even more text which I want to grab. </line>
</chapter>

它事实上的结构如下:

<chapter>
<line /> Some text which I want to grab.
<line /> Some more text which I want to grab.
<line /> Even more text which I want to grab.
</chapter>

因此，每一章的“行”就位于自闭行标签旁边。您能推荐一种获取这些的方法吗？可能在 javascript/nodejs 中？

Answer 1

格式是有效的 XML，因此您可以使用常规 XML 技术...即 DOMParser 来解析内容

但是，您只需要在解析行方面稍微聪明一些 - 您想要找到每一行，并收集所有作为文本 Node 的兄弟 Node (应该只有一个，但我提供的代码并不做出任何假设)

您没有指定输出“结构”，但您可以使用一种方法来输出嵌套数组 - 第一级是章节，每个章节都有一个行数组

var xml = `<chapter>
<line /> Some text which I want to grab.
<line /> Some more text which I want to grab.
<line /> Even more text which I want to grab.
</chapter>`

var parser = new DOMParser();
var content = parser.parseFromString(xml, 'application/xml')
var chapters = content.getElementsByTagName('chapter');
var obj = [].reduce.call(chapters, function(result, chapter) {
    var lines = chapter.getElementsByTagName('line');
    result.push([].reduce.call(lines, function(result, line) {
        var text = '';
        for(var node = line.nextSibling; node && node.nodeType == 3; node = node.nextSibling) {
            text += node.nodeValue;
        }
        result.push(text);
        return result;
    }, []))
    return result;
}, []);
console.log(JSON.stringify(obj));

addressing the comments - firstly some documentation:

DOMParse documentation

Array#reduce documentation

Function#call documentation

现在，解释一下这段代码中的[].reduce.call(array, fn)

[].reduce.call 是 Array.prototype.reduce.call

的简写

getElementsByTagName 返回一个 HTMLCollection ...它的行为类似于一个数组，只是它不是一个数组...有几种方法可以将一个数组变成一个数组HTMLCollection——最原始:

var array = [];
for(var i = 0; i < collection.length; i++) {
    array[i] = collection[i];
}

或

var array = Array.prototype.slice.call(collection);

或 (ES2015+) - 在 IE 中不可用，除非您进行了填充 - 请参阅文档

var array = Array.from(collection);

但是，在 [].reduce 上使用 .call 方法允许第一个参数(this 参数)为任意可迭代的，不仅仅是一个数组，所以它就像使用上面的 array 一样 array.reduce(fn) - 这是一种将 HTMLcollection 视为数组的方法，而不需要对于中间变量