JS：将纯文本 url（在 blob 内）转换为链接或 iframe答案

【问题标题】：JS: Convert plain text url (within blob) to link or iframeJS：将纯文本 url（在 blob 内）转换为链接或 iframe
【发布时间】：2013-11-06 14:40:33
【问题描述】：

正在寻找一种 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> 跳过一只懒狗。

【问题讨论】：

return '<p><a href="' + url + '">' + url + '</a></p>';?有什么问题？
你如何区分urls，哪个是视频链接，哪个是图片，哪个只是页面链接？一种方法，amybe你可以通过查看域名来找出链接类型（视频/图像），例如，如果alink包含youtube那么它就是一个视频链接等等。
更具体地说是检查 url 是来自 youtube 还是 vimeo，如果是，则添加 iframe，但如果 url 不是，则添加 JB Nizet 评论之类的链接。
是的，我已经更新了我的评论，如果你的链接包含youtube/viemo，那么它就是一个视频链接等等..
想知道是否有一个打包好的 github 项目已经在这样做，并且可能正在查找 flickr、youtube、vimeo 等。标题以添加到 html alt 标题属性中。

标签： javascript angularjs

【解决方案1】：

您可以尝试这样的事情 (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);
}

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

更新：（用embed重新制作youtube url）

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.

【讨论】：

甜蜜！一个问题。 if var link1 = '这只敏捷的棕色狐狸http://www.flickr.com/photos/volume12/3820189650/跳过一只懒狗。';我将如何获取 url 以通过生成器运行？
对不起！没听懂，能改一下吗？
如果 url 在大文本块内怎么办。您如何找到每个网址？
能否通过字符串是否有http或https来找到url？然后它可以检查它是否有 youtube？
你可以使用regex。