JavaScriptを効果的に解析する方法

Question

私は大きなxml構造を持っています。私は以下のような特定のXML構造に興味があります。 imgタグだけを抽出し、src属性の値がcoral-cardの内側にある場合は、それらの値を抽出する必要があります。私はregexを使ってサンゴカードのタグを正規表現で囲み、サンゴタグと正規表現を使ってimgタグとコンテンツにアクセスしようとしていました。

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

下記のようなサンゴカードタグを含む指定されたxmlコンテンツを取得した後、何かを使用する方法がありますか？私はjqueryまたはjavascript関数を使ってimgタグとsrc属性値を得ることが可能でなければならないと思うので、これの後にregexを使いたくない。

<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); 

xmlブロブからノードを抽出するすべての方法については、xpath docsを参照してください。

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>