Extract SRC from a iFrame in Javascript

Question

I have an iframe in a string, as below:

let data = "<iframe src=\"https://example.com/3380098/test/embed\" height=\"500\" width=\"100%\" style=\"border:0\"></iframe>"

My goal is to extract the number '3380098' from the src.

And I am stuck with parsing it.

Here is my approach:

var parser = new DOMParser();

var parsedIframe = parser.parseFromString(data, "text/html");
let iFrame = parsedIframe.getElementsByTagName("iframe");

But from here on, I am unable to get the src of the iframe. Please help.

This question is different because there is no real iframe, it's a string.

Possible duplicate of [Get current URL from IFRAME](https://stackoverflow.com/questions/938180/get-current-url-from-iframe) — ic3b3rg, Dec 22 '18 at 04:21
Just accessing src (like iFrame.src) gives me nothing. I also tried iFrame[0].src. But doesn't help. — asanas, Dec 22 '18 at 04:23
@ic3b3rg that's not exactly the same thing - the src value could differ from the href of the page if the src value goes through a redirect first — Matthew Herbst, Dec 22 '18 at 04:25
@MatthewHerbst OP reports `src` is always undefined - likely reason is the src is a different domain — ic3b3rg, Dec 22 '18 at 04:31
@asanas I said the `src` *attribute*, not the `src` property, they're sometimes different (such as in this case). Select the created element, then `element.getAttribute('src')`, then you can play with it — CertainPerformance, Dec 22 '18 at 04:50

score 2 · Accepted Answer · answered Dec 22 '18 at 04:25

Do you really need to parse it as DOM? If it's always going to be in a similar format with a similar URL then you can do some regex instead, like:

let data = "<iframe src=\"https://example.com/3380098/test/embed\" height=\"500\" width=\"100%\" style=\"border:0\"></iframe>";
let match = data.match(/example\.com\/([0-9]+)\//i);
alert(match[1]);

score 1 · Answer 2 · answered Dec 22 '18 at 04:23

1

Just read the src property of the first element in collection, then parse the URL.

let data = "<iframe src=\"https://example.com/3380098/test/embed\" height=\"500\" width=\"100%\" style=\"border:0\"></iframe>";

var parser = new DOMParser();

var parsedIframe = parser.parseFromString(data, "text/html");
let iFrame = parsedIframe.getElementsByTagName("iframe");

// Read URL:
let src = iFrame[0].src;
console.log(src);

// Parse URL:
let match = src.match(/\/(\d+)\//);
let digits = match ? match[1] : null;
console.log(digits);

answered Dec 22 '18 at 04:23

Alexander O'Mara

58,688
18
163
171

In my mind this should work, but I am always getting undefined for src. – asanas Dec 22 '18 at 04:29
@asanas Did you true running the code snippet in my answer? If it works there as it does for me, there must be something else that's the problem. – Alexander O'Mara Dec 22 '18 at 04:30
You are right. The snippet works. But something else is wrong in my code. I have to check. May be because I am using dom-parser to do it in node? – asanas Dec 22 '18 at 04:31
@asanas That could certainly be the issue. – Alexander O'Mara Dec 22 '18 at 04:33
There is no need to parse the string into a document using DOMParser - it is a simple string – Randy Casburn Dec 22 '18 at 04:34

score 0 · Answer 3 · answered Dec 22 '18 at 04:24

0

parsedIframe.getAttribute("src")

answered Dec 22 '18 at 04:24

last_fix

369
1
4
19

score 0 · Answer 4 · answered Aug 30 '23 at 07:37

0

data
.split(' ')
.find((el) => el.startsWith('src='))
.slice(4);

answered Aug 30 '23 at 07:37

Vilena

1

1

Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Aug 30 '23 at 10:06

Extract SRC from a iFrame in Javascript

4 Answers4