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

56,044
17
157
163

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

329
4
18

Extract SRC from a iFrame in Javascript

3 Answers3