如何在javascript中有效地解析xml

Question

我有一个很大的xml结构。我对如下的某些xml结构感兴趣。我只需要提取img标签和src属性的值（如果它们位于珊瑚卡内）。我试图使用正则表达式来获取珊瑚卡封闭标签与正则表达式，然后使用正则表达式与珊瑚卡标签到达img标签和内容。

var regex = /<coral\-card ((.|[\r\n])*?)<\/coral\-card>/g; 

当我得到指定的xml内容包含像下面的珊瑚卡标签后有什么方法可以使用。我不想在此之后使用正则表达式，因为我认为应该可以使用jquery或javascript函数获取img标记和src属性值。

<coral-card variant="condensed" data-timeline="true" stacked> 
    <coral-card-asset> 
     <img src="/content/dam/collections/3/3qtVFsGwnDVKpZ6H_SaM/lightbox.folderthumbnail.jpg?width=240&height=240"> 
    </coral-card-asset> 
</coral-card> 

<coral-card variant="semi-condensed" data-timeline="true" stacked> 
    <coral-card-asset> 
     <img src="/content/dam/collections/3/3qtVFsGwnDVKpZ6H_SaM/small.folderthumbnail.jpg?width=240&height=240"> 
    </coral-card-asset> 
</coral-card> 

Answer 1

DOMParser和xpath非常容易用于解析xml。你可以这样做：

const DOMParser = require('xmldom').DOMParser; 
const xpath = require('xpath'); 

let parser = new DOMParser(); 
let doc = parser.parseFromString(<your xml>); 
let document = doc.documentElement; 
let coralCards = xpath.select('<path>/coral-card', document); 

请参阅xpath文档，了解从xml blob中提取节点的所有方法。

Answer 2

这也正是为什么core DOM specification创建：

// Find all the <coral-card> elements: 
 
var elements = document.getElementsByTagName("coral-card"); 
 

 
// Loop through them: 
 
for(var i = 0; i < elements.length; ++i){ 
 
    // Extract whatever you need: 
 
    console.log(elements[i].getAttribute("variant")); 
 
    console.log(elements[i].querySelector("img").src); 
 
}

<coral-card variant="condensed" data-timeline="true" stacked> 
 
    <coral-card-asset> 
 
     <img src="/content/dam/collections/3/3qtVFsGwnDVKpZ6H_SaM/lightbox.folderthumbnail.jpg?width=240&height=240"> 
 
    </coral-card-asset> 
 
</coral-card> 
 

 
<coral-card variant="semi-condensed" data-timeline="true" stacked> 
 
    <coral-card-asset> 
 
     <img src="/content/dam/collections/3/3qtVFsGwnDVKpZ6H_SaM/small.folderthumbnail.jpg?width=240&height=240"> 
 
    </coral-card-asset> 
 
</coral-card>