得到兩個值之間的YouTube鏈接，並用IFRAME

-5

<div class="comment"> 
[youtube]http://www.youtube.com/watch?v=videoid1[/youtube] 
random text 
</div> 
<div class="comment"> 
[youtube]http://youtu.be/videoid2[/youtube] 
random text2 
</div>

如何使用jQuery你能提取鏈接的YouTube視頻ID對每個.comment元素之間[YouTube的]到HTML [/ YouTube的]創建一個嵌入播放器這樣的結果將是

<div class="comment"> 
<iframe width="420" height="315" src="http://www.youtube.com/embed/videoid1?rel=0" frameborder="0" allowfullscreen></iframe> 
random text 
</div> 
<div class="comment"> 
<iframe width="420" height="315" src="http://www.youtube.com/embed/videoid2?rel=0" frameborder="0" allowfullscreen></iframe> 
random text2 
</div>

來源

2011-11-29 Yusaf Khaliq

@Ktash抱歉忘了提及，但無所謂羅布W已經回答了它 –

嘗試這樣的事情：http://jsfiddle.net/shawn31313/aY9XF/7/。我正在使用.text（）向您展示它將如何組合在一起。但是，當使用.html（）它仍然不會呈現代碼。我不知道爲什麼。 – Shawn31313

我們希望您試圖自己解決這個問題，而不是要求社區爲您提供完整的解決方案。 – Kev

您可以使用一個RegExp（不防呆）+ jQuery的.each()和.html()方法來實現這一點。

var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/, 
    youtubeHTML = '<iframe width="420" height="315" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>'; 
$(".comment").each(function(){ 
    var $this = $(this); 
    $this.html($this.html().replace(youtubeTag, youtubeHTML)) 
});

的模式匹配：

[youtube]
與http://或https://
可選地開始，接着www.
或者：youtube.com，youtu.be
其次斜線（/）
任選地：watch?v=或v/
甲YouTube視頻ID（所有字母數字字符，下劃線和連字符）
任選地隨後的查詢字符串/位置散列的另一部分
[/youtube]

來源

2011-11-29 22:54:44

我有一個問題，如果一個鏈接有＆功能= grec_index在它的結尾，這將不適用於例如** [youtube] http://www.youtube.com/watch?v=videoid1&feature=grec_index [/ youtube] ** http://jsfiddle.net/yusaf/uLTzw/1/ –

@Yusaf我已經更新了我的答案。注意創建過於放鬆的模式（即不是'。*？'，特別是不是'。*'），因爲這些模式也可能會不確定地匹配'[youtube] .... watch？v = 4568wa不是URL的一部分blabla [/youtube]' –

編輯將不起作用 –

得到兩個值之間的YouTube鏈接，並用IFRAME

回答

相關問題