1

私はいくつかの 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>

次のように、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>

HTML コードで YouTube からのリンクを検索し、JavaScript を使用して同等の iframe コードに置き換えるにはどうすればよいですか?

4

1 に答える 1

5

これを行う1つの方法は次のとおりです。

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フィドルデモ。

健全性チェックはまったく行われていないことに注意してください。このアプローチでは、動画の識別子の前にv=英数字以外の文字を付けて終了する必要があります。

私はOpera12とChromium19でのみテストと検証を行いました。

YouTube URL形式のもう1つの形式を説明するには、次のようにします。

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フィドルデモ。

事実上、これは同じプロセスですが、正規表現がわずかに異なります。

がnodeType等しいと3 見なされる場所が2つあり、iframesが作成される場所が2つあるため、2つのindexOf()評価をaの中にラップして、抽象化された作成を別の関数ifにテストします。どちらも単純に不必要な繰り返しを避けてください。nodeTypeiframe

参照：

于 2012-07-23T22:30:55.817 に答える