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

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

javascript parsing url search replace

替换文本中的随机youtube链接以使用javascript嵌入代码,javascript,parsing,url,search,replace,Javascript,Parsing,Url,Search,Replace,我有一些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>

我有一些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>

文本
http://www.youtube.com/watch?v=QZ2ekuCu4gM&feature=relmfu 
正文
youtube.com/watch？v=adrJx864olE&feature=g-logo-xit
正文

我需要自动将任何YouTube URL替换为在该URL嵌入视频的iFrame，如下所示：

<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>

文本
正文
正文

如何从YouTube搜索HTML代码中的链接，并使用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);

实际上，这是同一个过程，只是使用了稍微不同的正则表达式

因为有两个地方必须找到

nodeType

等于

，还有两个地方创建

iframe

，所以我将这两个

indexOf（）包装起来

在

if

内部进行评估，以测试

节点类型

和抽象的

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

nodeType

iframe

indexOf（）包装起来

if

节点类型

iframe