Target iframe src inside ajax_injected chunk of code

Question

I have a block of code that is spit by oembed. then I need to target the src attribute of iframes and replace it with data-src.

Her's what I have currently:

embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {          
          var embed_html = (data.html).replace('src', 'data-src');
          $( "div#item"+number).html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };    

$.ajax(embed_request);

The issue is that my replace() above changes too many src inside the chunk of code data.html

How can I tell via javascript or jquery here var embed_html = (data.html).replace('src', 'data-src'); to only change the iframe's src it runs into inside the chunk of html code.

Today unfortunately my current code changes not only the below iframe src but also the src of src="//platform.instagram.com/en_US/embeds.js":

So I get in the final spitted view:

How to only target the iframe's src ?

Thanks

EDIT

Here are two examples of the html chunk code spitted by oembed

instagram

Facebook

Sarah Gro&#223; · Accepted Answer

You can convert the markup string to HTML elements (off the DOM) first, then find any iframe elements, replace their attribute(s), and add the whole thing to the DOM:

embed_request = {
  url: url,
  dataType: "jsonp",
  cache: false,
  success: function (data) {
    try {          
      $(data.html).filter('iframe').each(function() {
        var $this = $(this);
        $this.attr('data-src', $this.attr('src')).removeAttr('src');
      }).end().appendTo("div#item"+number);
    } catch (err) {
      console.log(err);
    }
  }
};    

$.ajax(embed_request);

Here's a mockup (replaced the ajax call by a function call etc.) to show that it's working:

var number = 1,
    data = {html: atob("PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3Lmluc3RhZ3JhbS5jb20vcC82NDU2N1NERkZERlMvZW1iZWQvY2FwdGlvbmVkLz9jcj0xJmFtcDt2PTciIGNsYXNzPSJpbnN0YWdyYW0tbWVkaWEgaW5zdGFncmFtLW1lZGlhLXJlbmRlcmVkIiBpZD0iaW5zdGFncmFtLWVtYmVkLTAiICBhbGxvd3RyYW5zcGFyZW5jeT0idHJ1ZSIgZnJhbWVib3JkZXI9IjAiIGhlaWdodD0iODQ5IiBkYXRhLWluc3Rncm0tcGF5bG9hZC1pZD0iaW5zdGFncmFtLW1lZGlhLXBheWxvYWQtMCIgc2Nyb2xsaW5nPSJubyIgc3R5bGU9ImJvcmRlcjogMXB4IHNvbGlkIHJnYigyMTksIDIxOSwgMjE5KTsiPjwvaWZyYW1lPjxzY3JpcHQgYXN5bmM9IiIgZGVmZXI9IiIgc3JjPSIvL3BsYXRmb3JtLmluc3RhZ3JhbS5jb20vZW5fVVMvZW1iZWRzLmpzIj48L3NjcmlwdD4=")}; // this is the html provided by you, containing the iframe and script tag, but I had to base64 encode it, as otherwise the code snippet tool wouldn't let me insert it

(function (data) {
  try {          
    $(data.html).filter('iframe').each(function() {
      var $this = $(this);
      $this.attr('data-src', $this.attr('src')).removeAttr('src');
    }).end().appendTo("div#item"+number);
  } catch (err) {
    console.log(err.message);
  }
})(data);

Target iframe src inside ajax_injected chunk of code

Answers (1)

Related Questions