0

正在寻找一种 javascript 解决方案，用于将纯文本 url（在文本 blob 内）转换为锚链接或 iframe 视频，即时（或页面加载）。这是我正在寻找的 Rails 示例： https ://github.com/dejan/auto_html

例子：

图片或非视频网址

前：http://www.flickr.com/photos/volume12/3820189650/

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

视频

前：http://youtu.be/QYEC4TZsy-Y

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

正在使用

之前：敏捷的棕色狐狸，http://www.flickr.com/photos/volume12/3820189650/跳过一条懒惰的狗。

之后：敏捷的棕色狐狸，<a href="http://www.flickr.com/photos/volume12/3820189650/">http://www.flickr.com/photos/volume12/3820189650/</a>跳过一只懒惰的狗。

4

1 回答 1

0

你可以尝试这样的事情（一个例子）

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);
}

这只是一个想法，您可以扩展它并为更多域名添加更多功能。另外，请注意，我使用 ,http://youtu.be/embed/QYEC4TZsy-Y代替http://youtu.be/QYEC4TZsy-Y, 因为'X-Frame-Options' set to 'SAMEORIGIN'.

更新：（重新制作youtube网址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);
}

示例在这里。

于 2013-10-27T23:05:35.143 回答