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

有关从xml blob中提取节点的所有方法，请参阅xpath docs。

Answer 2

这正是创建core DOM specification的原因：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在javascript中有效地解析xml

2 个答案: