0

Looking for a javascript solution for converting plain text urls (inside text blobs) into anchor links or iframe videos, on the fly (or on page load). Here's a rails example of what I'm looking for: https://github.com/dejan/auto_html

Examples:

Picture or Non-video url

Before: http://www.flickr.com/photos/volume12/3820189650/

After: <p><a href="http://www.flickr.com/photos/volume12/3820189650/">http://www.flickr.com/photos/volume12/3820189650/</a></p>

Video

Before: http://youtu.be/QYEC4TZsy-Y

After: <p><iframe width="410" height="270" src="//www.youtube.com/embed/QYEC4TZsy-Y" frameborder="0" allowfullscreen></iframe></p>

In Use

Before: The quick brown fox,http://www.flickr.com/photos/volume12/3820189650/, jumps over a lazy dog.

After: The quick brown fox,<a href="http://www.flickr.com/photos/volume12/3820189650/">http://www.flickr.com/photos/volume12/3820189650/</a>, jumps over a lazy dog.

Jeffrey
  • 4,098
  • 11
  • 42
  • 66
  • 1
    `return '

    ' + url + '

    ';`? What's the problem?     – JB Nizet Oct 27 '13 at 22:29
  • 1
    How would you differentiate `url`s that, which one is video link and which one is an image and which one is just a link to a page ? One way, amybe you can find out the link type (video/image) by checking the domain names, for example, if alink contains `youtube` then it's a video link and so on. – The Alpha Oct 27 '13 at 22:30
  • More specifically to check whether the url is from youtube or vimeo and if so add iframe, but if url isn't then add link like JB Nizet's comment. – Jeffrey Oct 27 '13 at 22:33
  • Yes, I've updated my comment, if your link contains `youtube/viemo` then it's a video link and so.. – The Alpha Oct 27 '13 at 22:33
  • Wondering if there is a nicely packaged github project that is already doing this, and perhaps looking up flickr, youtube, vimeo, etc.. titles to add to the html alt title attributes. – Jeffrey Oct 27 '13 at 22:35
  • I added another Example above of how the plain text needs to be translated on the fly. – Jeffrey Oct 27 '13 at 22:45
  • You still haven't explained what the problem is: detecting URLs inside text? Replacing URL with a link? Separating video URLs and non-video URLs? Update the dom with new content? – JB Nizet Oct 27 '13 at 22:53
  • Detecting the URLs inside text and separating them with an example of the dom update. – Jeffrey Oct 27 '13 at 22:59

1 Answers1

0

You may try something like this (An Example)

var linkGenerator = {
    youtube:function(link){
        var ifr = document.createElement('iframe'),
        p = document.createElement('p');
        ifr.src = link;
        ifr.frameborder = 0;
        ifr.allowfullscreen = true;
        ifr.width = '410';
        ifr.height = '270';
        p.appendChild(ifr);
        document.getElementsByTagName('body')[0].appendChild(p);
    },
    flickr:function(link){
        var lnk = document.createElement('a'),
        p = document.createElement('p');
        lnk.href = link;
        lnk.innerHTML = 'image';
        p.appendChild(lnk);
        document.getElementsByTagName('body')[0].appendChild(p);
    }
};

var link1 = 'http://www.flickr.com/photos/volume12/3820189650/';
var link2 = 'http://youtube.com/embed/QYEC4TZsy-Y';
if(link1.match(/flickr/i)) {
    linkGenerator.flickr(link1);
}
if(link2.match(/youtube/i)) {
    linkGenerator.youtube(link2);
}

This is just an idea, you may extend it and add more functions for more domain names. Also, notice that, I've used http://youtu.be/embed/QYEC4TZsy-Y instead of http://youtu.be/QYEC4TZsy-Y, because of 'X-Frame-Options' set to 'SAMEORIGIN'.

Update : (To re-make the youtube url with embed)

var link2 = 'http://youtube.com/QYEC4TZsy-Y';
if(link2.match(/youtube/i)) {
    var vdoId = link2.split('/').pop();
    link2 = 'http://www.youtube.com/embed/'+vdoId;
    linkGenerator.youtube(link2);
}

Example Here.

The Alpha
  • 143,660
  • 29
  • 287
  • 307