Get attribute from HTML element which is json value using JS

Question

I have the following json returned from a service:

{
"html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/FQpUOimNvXA?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>"
}

How can I get the value of the srcie attribute https://www.youtube.com/embed/FQpUOimNvXA?feature=oembedusing javascript?

Answer 1

Create a jQuery object from iframeand get the attribute src:

var jsonString = {"html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/FQpUOimNvXA?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>"}
var src = $(jsonString.html).attr("src");
$("#source").html(src);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source"></div>

Run codeHide result

Answer 2

Fiddle

var data = {
"html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/FQpUOimNvXA?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>"
}

console.log(data.html);

var str = data.html;
var word = str.split(" ");
var word1 = word[3].split('"');
console.log(word1[1]);

I split a couple of times when I ended up with https://www.youtube.com/embed/FQpUOimNvXA?feature=oembed