Как эффективно анализировать xml в javascript

Question

У меня есть большая структура xml. Меня интересует определенная структура xml, как показано ниже. Мне нужно извлечь только теги img и значение атрибута src, если они находятся внутри коралловой карты. Я пытался использовать регулярное выражение для получения тегов с прикрепленными к коралловым картам с помощью регулярного выражения, а затем использовать регулярное выражение с тегами коралловых карт для доступа к тегу img и содержимому.

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

Есть ли способ использовать что-либо после того, как у меня есть указанный xml-контент, содержащий теги коралловых карт, как показано ниже. Я не хочу использовать регулярное выражение после этого, поскольку я думаю, что должно быть возможно получить значение img и значение атрибута src, используя функцию jquery или javascript.

<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-сгусток.

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>