Javascript regular expression to replace iframe to clickable YouTube link

Question

I'm working importing a rss feed via javascript from a blog and using it to display elements to a mobile app, so DOM manipulation is not an option.

I have a json parsed rss element that is a blog post that could contain one or more youtube video iframes, formated like this: <iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>

What I need is first get the src from iframe, store it into a variable to get the video code, then replace the <iframe...></iframe> to something like <a href="http://youtube.com/watch?v=YOUTUBEID"><img src="http://img.youtube.com/vi/YOUTUBEID/1.jpg" width="100%" /></a>

The solutions I found were all PHP solutions and I have not been able to transpose them to Javascript. Reference:

I tried so far using javascript function

string.replace('.../g')

But no luck using exactly the same regexes from PHP. Besides, I need that to be made on all the iframes that could appear in my string, not only one or the first. What I was trying is basically like this guy was. But the answer to him (manipulating DOM) is not an option for me.

Can anybody help me? Thanks in advance

@thefourtheye Thanks for your feedback, I edited the question with what I've tried so far — steps
– steps, Commented Dec 15, 2013 at 12:09
@RahilWazir, This is a default YouTube thumbnail URL img.youtube.com/vi/YOUTUBEID/1.jpg, I have to change YOUTUBEID to the video id — steps
– steps, Commented Dec 15, 2013 at 12:20

klarki · Accepted Answer · 2013-12-15 12:21:25Z

1

I assume you have the a String in javascript with the iframe element. Try this javascript code:

var iframe = '<iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>'

var pattern = /src="([^"]+)"/ //finds the whole url
var match = pattern.exec(iframe);
var url = match[1];

pattern = /embed\/([\d\w]+)/;
match = pattern.exec(url)
var youtubeId = match[1];

var anchor = '<a href="http://youtube.com/watch?v='+youtubeId+'"><img src="http://img.youtube.com/vi/'+youtubeId+'/1.jpg" width="100%" /></a>'

alert(anchor)

http://jsfiddle.net/7EMzf/ works with your example.

note that the regex I used are very simple and you might want to consider some corner cases you may be getting.

answered Dec 15, 2013 at 12:21

klarki

9154 silver badges13 bronze badges

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

3 Comments

steps Over a year ago

This solution seems to work but only partially. What I have is a string with many ´iframes´. It's precisaly a blog post string, with HTML tags. I need to replace all of those ´iframes´ into that string to video links

Rahil Wazir Over a year ago

@JoãoPauloApolinárioPassos so you need to replace iframe tags to anchor tags?

steps Over a year ago

Exactly. I need a function that finds all iframes into a string e.g.:

<p><iframe src="http://youtube.com/embed/blabla"></iframe></p><p>This is a blog post</p><p><iframe src="http://youtube.com/embed/bleble"></p>

and replace those that are YouTube videos for anchor tags just like the one you've made, something like this:

<p><a href="http://youtube.com/watch?v=blabla"><img src="http://img.youtube.com/vi/blabla/1.jpg" width="100%"></a></p><p>This is a blog post</p><p><a href="http://youtube.com/watch?v=bleble"><img src="http://img.youtube.com/vi/bleble/1.jpg" width="100%"></a></p>

Derek · Accepted Answer · 2013-12-15 12:33:04Z

1

This is c#, but you should be able to figure out how to change it to JavaScript. NOTE: I didn't escape the quotation marks inside the string, which you will have to do.

string text = Regex.Replace( inputString, @"src="(.+?)"", "<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>" , RegexOptions.None );

The search string:

"src="(.+?)""

The replace string:

"<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>"

Using http://www.regular-expressions.info/javascriptexample.html these are the inputs and outputs:

Regexp:
<iframe src="(.+?)".+</iframe>

Subject string:
<iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>

Replacement text:
<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>

Result:
<iframe <a href="http://youtube.com/watch?v=//www.youtube.com/embed/0nvGQLnKg4Q"><img src="http://img.youtube.com/vi///www.youtube.com/embed/0nvGQLnKg4Q/1.jpg" width="100%" /></a> height="360" width="480" allowfullscreen="" frameborder="0"></iframe>

You can also see sample JavaScript code on that website (how it does the replace, etc. )

If you want to grab the whole iframe string and replace it:

Use:

<iframe src="(.+?)".+</iframe>

as your find string.

edited Dec 15, 2013 at 12:33

answered Dec 15, 2013 at 12:12

Derek

9,0837 gold badges40 silver badges65 bronze badges

1 Comment

steps Over a year ago

The result here is not what I expect. I need to replace all <iframe> tags to the anchor. No iframe will be kept stay on my string.

Rahil Wazir · Accepted Answer · 2013-12-15 14:36:37Z

1

Extending the @klarki answer

Suppose below is your HTML:

<div id="content">
    <iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>alksdmalksdmkalsmdasd
    <img src="1.jpg" alt="" />
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
    IpsumLorem Ipsum
    <iframe src="//www.youtube.com/embed/1mgCQLnKg7K" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>
</div>

Javascript:

var iframe = document.getElementById("content").innerHTML;  //your post content string

    var pattern = /<iframe.*?\/iframe>/gm;
    var mySafeContent = iframe.replace(pattern, function (sMatch) { //making a callback function to extract youtube video ID and replace <iframe /> with <a />

        var url = /src="(.*?)"/g.exec(sMatch), //extract current iframe video source
            source = url[1];

        pattern = /embed\/([\d\w]+)/;
        match = pattern.exec(source);
        var youtubeId = match[1];

        var anchor = '<a href="http://youtube.com/watch?v='+youtubeId+'"><img src="http://img.youtube.com/vi/'+youtubeId+'/1.jpg" width="100%" /></a>';

        return anchor; //Replaced the current iframe with the anchor above
    });

    document.getElementById("content").innerHTML = mySafeContent; //your full content string variable

Live Example

answered Dec 15, 2013 at 14:36

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

4 Comments

steps Over a year ago

I don't have DOM elements do to that. My content is stored into a string, using "document" variable and similar alternatives are not a possibility

Rahil Wazir Over a year ago

@JoãoPauloApolinárioPassos Its just an example you can customize as your need. This is what you want right? <iframe /> being replace by `<a />' tags?

steps Over a year ago

Exactly. I need a function that finds all iframes into a string e.g.:

<p><iframe src="http://youtube.com/embed/blabla"></iframe></p><p>This is a blog post</p><p><iframe src="http://youtube.com/embed/bleble"></p>

and replace those that are YouTube videos for anchor tags just like the one you've made, something like this:

<p><a href="http://youtube.com/watch?v=blabla"><img src="http://img.youtube.com/vi/blabla/1.jpg" width="100%"></a></p><p>This is a blog post</p><p><a href="http://youtube.com/watch?v=bleble"><img src="http://img.youtube.com/vi/bleble/1.jpg" width="100%"></a></p>

Rahil Wazir Over a year ago

Now what? isn't the answer you were looking for?

Derek · Accepted Answer · 2013-12-15 13:03:12Z

This link might be closer to what you want:

http://jsfiddle.net/zfzXa/1/

NOTE the find string:

var find = '<iframe src="(//www.youtube.com.+?)".+</iframe>';

This now will only replace things that exactly start with:

<iframe src="(//www.youtube.com

The full code:

var find = '<iframe src="(//www.youtube.com.+?)".+</iframe>';
var replace = '<a href="http://youtube.com/watch?v=$1"><img src="http://img.youtube.com/vi/$1/1.jpg" width="100%" /></a>';
var input = '<iframe src="//www.youtube.com/embed/0nvGQLnKg4Q" height="360" width="480" allowfullscreen="" frameborder="0"></iframe>';

var re = new RegExp(find, "g");
var output = input.replace(re, replace);
alert(output);

You may need to tweak the regular expression to deal with whitespace if that could be an issue.

Collectives™ on Stack Overflow

Javascript regular expression to replace iframe to clickable YouTube link

4 Answers 4

3 Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related