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, Dec 15 '13 at 12:09
@RahilWazir, This is a default YouTube thumbnail URL http://img.youtube.com/vi/YOUTUBEID/1.jpg, I have to change YOUTUBEID to the video id — steps, Dec 15 '13 at 12:20

Derek · Answer 1 · 2013-12-15T12:33:04.483

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.

The result here is not what I expect. I need to replace all tags to the anchor. No iframe will be kept stay on my string. — steps, Dec 15 '13 at 12:28

score 1 · Answer 2 · answered Dec 15 '13 at 12:21

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 '13 at 12:21

klarki

915
4
13

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 – steps Dec 15 '13 at 12:27
1

@JoãoPauloApolinárioPassos so you need to replace `iframe` tags to `anchor` tags? – Rahil Wazir Dec 15 '13 at 12:36
Exactly. I need a function that finds all iframes into a string e.g.: `
This is a blog post
` and replace those that are YouTube videos for anchor tags just like the one you've made, something like this: `
This is a blog post
` – steps Dec 15 '13 at 12:45

score 1 · Answer 3 · answered Dec 15 '13 at 14:36

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

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 — steps, Dec 15 '13 at 18:56
@JoãoPauloApolinárioPassos Its just an example you can customize as your need. This is what you want right? `` being replace by `' tags? — Rahil Wazir, Dec 15 '13 at 22:29
Exactly. I need a function that finds all iframes into a string e.g.: `
This is a blog post
` and replace those that are YouTube videos for anchor tags just like the one you've made, something like this: `
This is a blog post
` — steps, Dec 15 '13 at 23:30

score 0 · Answer 4 · answered Dec 15 '13 at 13:03

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.

Javascript regular expression to replace iframe to clickable YouTube link

4 Answers4