How to parse xml effectively in javascript

Question

I have a big xml structure. I am interested in certain xml structure like below. I need to extract img tags only and the value of the src attribute if they are inside coral-card. I was trying to use regex to get coral-card enclosing tags with a regex and then use regex with the coral-card tags to get to the img tag and the content.

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

Is there a way to use anything after I have got the specified xml content containing coral-card tags like below. I don't want to use regex after this as I think it should be possible to get the img tag and src attribute value using jquery or javascript function.

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

Have you considered parsing with DOMParser?

ray
– ray

2016-11-18 17:39:53 +00:00
Commented Nov 18, 2016 at 17:39 — ray
– ray, Commented Nov 18, 2016 at 17:39
stackoverflow.com/questions/1732348/…

user2345
– user2345

2016-11-18 17:41:34 +00:00
Commented Nov 18, 2016 at 17:41 — user2345
– user2345, Commented Nov 18, 2016 at 17:41

Jim B. · Accepted Answer · 2016-11-18 17:42:27Z

2

DOMParser and xpath are very easy to use for parsing xml. You can do something like:

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

See xpath docs for all of the ways you can extract nodes out of an xml blob.

answered Nov 18, 2016 at 17:42

Jim B.

4,7944 gold badges32 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Marcus · Accepted Answer · 2016-11-18 17:44:06Z

This is exactly why the core DOM specification was created:

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

Thanks. I have that specified xml content within coral-card tag or to put it precisely I have a very big HTML content lets say htmlResponse which has this xml content . How would documen.GetEelementsByTagName would work in that case ? Should I convert html response string to DOM using parseHTML first ?
@Geek Yes. Once it's parsed from a string. You can use the DOM API to traverse it and extract whatever you want.

Collectives™ on Stack Overflow

How to parse xml effectively in javascript

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related