替换文本中的随机youtube链接以使用javascript嵌入代码

Replace random youtube link in text to embed code using javascript

本文关键字：javascript 代码 链接 文本 随机 youtube 替换      更新时间：2024-01-29

我有一些HTML代码，例如：

<div>Text</div> 
http://www.youtube.com/watch?v=QZ2ekuCu4gM&feature=relmfu 
<div>Text</div> 
youtube.com/watch?v=adrJx864olE&feature=g-logo-xit
<div>Text</div>
<a href="#">LINK</a>

我需要用嵌入视频的iframe自动替换任何YouTube URL，如下所示：

<div>Text</div> 
<iframe width="560" height="315" 
src="http://www.youtube.com/embed/QZ2ekuCu4gM" frameborder="0" 
allowfullscreen></iframe>
<div>Text</div> 
<iframe width="560" height="315" 
src="http://www.youtube.com/embed/adrJx864olE" frameborder="0" 
allowfullscreen></iframe>
<div>Text</div>
<a href="#">LINK</a>

如何在HTML代码中搜索YouTube上的链接，并使用JavaScript将其替换为等效的iframe代码？

这里有一种方法：

function linkYT(el) {
    if (!el) {
        return false;
    }
    else {
        var children = el.childNodes,
            text = [];
        for (var i=0, len=children.length; i<len; i++){
            var cur = children[i],
                nType = cur.nodeType,
                content = cur.nodeValue,
                url = 'http://www.youtube.com/embed/';
            if (nType == 3 && content.indexOf('youtube.com') > -1) {
                var embed = content.trim().match(/v=('w+)/)[1],
                    iframe = document.createElement('iframe');
                iframe.src = url + embed;
                el.insertBefore(iframe, cur.nextSibling);
                cur.parentNode.removeChild(cur);
            }
        }
    }
}
var el = document.getElementById('content');
linkYT(el);​

JS Fiddle演示。

请注意，根本没有健全性检查，这种方法要求视频的标识符以v=开头，并以非字母数字字符结尾。

我只在Opera 12和Chromium 19中进行了测试和验证。

为了解释一个其他形式的YouTube URL格式：

function createIframe(embed, parent, after, url){
    if (!embed || !parent || !after) {
        return false;
    }
    else {
        url = url ? url : 'http://www.youtube.com/embed/';
        var iframe = document.createElement('iframe');
        iframe.src = url + embed;
        parent.insertBefore(iframe, after.nextSibling);
        parent.removeChild(after);
    }
}
function linkYT(el) {
    if (!el) {
        return false;
    }
    else {
        var children = el.childNodes,
            text = [];
        for (var i=0, len=children.length; i<len; i++){
            var cur = children[i],
                nType = cur.nodeType,
                content = cur.nodeValue,
                url = 'http://www.youtube.com/embed/';
            if (nType == 3) {
                if (content.indexOf('youtube.com') > -1) {
                    var embed = content.trim().match(/v=('w+)/)[1];
                    createIframe(embed, el, cur);
                }
                else if (content.indexOf('youtu.be') > -1) {
                    var embed = content.trim().match(/be'/('w+)/)[1];
                    createIframe(embed, el, cur);
                }
            }
        }
    }
}
var el = document.getElementById('content');
linkYT(el);​

JS Fiddle演示。

实际上，这是一个相同的过程，只是有一个稍微不同的正则表达式。

因为有两个地方必须找到nodeType等于3和创建iframes的两个地方，所以我将两个indexOf()评估封装在if中，以测试nodeType，并将iframe-创建抽象为一个单独的函数，这两个函数都是为了避免不必要的重复。

参考文献：

  • childNodes
  • CCD_ 10
  • CCD_ 11
  • insertBefore()
  • nextSibling
  • match()
  • nodeType
  • CCD_ 16
  • parentNode
  • 正则表达式
  • CCD_ 18
  • trim()
相关文章：