找到所有youtube链接js（jquery）

假设有一个包含内容和youtube链接的div。 我想抓住youtube链接并嵌入它。

Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0 

我想获取链接并用嵌入代码替换为js（jquery）。

更新1：

到目前为止这是我的js：

  $("#content").each(function(){ var allContent = $(this).html(); //need regex to find all links with youtube in it, ovbiously it can't == youtube.com, but basically the link has to have youtube.com in it. if ($("a",allContent).attr("href") == "youtube.com" ) { // grab youtube video id /* replace link with 
  
 */ } }); 

Answer 1

我将content从id更改为类，因为我猜你有多个内容区域？

我确信有一种更有效的方法可以做到这一点，但这是我的尝试。 注意我吮吸正则表达式，所以我所拥有的就是尽可能接近，我确信有人可以帮助改进它，所以它不必替换每个循环中的?v= 。

HTML

 
Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0 and this one http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded
 
Here is a cool video. Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded 

脚本

 $(document).ready(function(){ // I added the video size here in case you wanted to modify it more easily var vidWidth = 425; var vidHeight = 344; $('.content:contains("youtube.com/watch")').each(function(){ var that = $(this); var txt = $(this).html(); // Tthis could be done by creating an object, adding attributes & inserting parameters, but this is quicker var e1 = ' '; var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0 if (vid.length) { $.each(vid, function(i){ var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0 that.append( e1 + ytid + e2 + ytid + e3 ) }) } }) }) 

我会第一个承认它不漂亮，但它有效。 我还在这个pastebin中粘贴了这段代码的工作版本

---

更新：我已经清理了一下代码，这是现在的样子（ 演示 ）：

 $(document).ready(function(){ // I added the video size here in case you wanted to modify it more easily var vidWidth = 425; var vidHeight = 344; var obj = ' '; $('.content:contains("youtube.com/watch")').each(function(){ var that = $(this); var vid = that.html().match(/(?:v=)([\w\-]+)/g); // end up with v=oHg5SJYRHA0 if (vid.length) { $.each(vid, function(){ that.append( obj.replace(/\[vid\]/g, this.replace('v=','')) ); }); } }); }); 

Answer 2

我和fudgey在同一条轨道上，但是我比他更吸引人，所以我“借”了他的代码，直到那时为止。 我所做的一个改变是使用swfobject嵌入video而不是手动编写嵌入代码。 它只是意味着你必须将swfobject库添加到页面

HTML与fudgey相同

 
Here is a cool video. Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0 and this one http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded
 
Here is a cool video. Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded 

对javascript的小改动

 $(function(){ // I added the video size here in case you wanted to modify it more easily var vidWidth = 425; var vidHeight = 344; $('.content:contains("youtube.com/watch")').each(function(i){ var that = $(this); var txt = $(this).html(); var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0 if (vid.length) { $.each(vid, function(x){ var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0 var playerid = 'videoplayer_' + i + "_" + x; that.append("
"); swfobject.embedSWF("http://www.youtube.com/v/" + ytid, playerid, vidWidth, vidHeight, "8"); }) } }) }) 

感谢Fudgey的回答

Answer 3

您需要使用以下内容获取div的内容：

 var text = $("div#content p").html(); // or .text() 

使用该文本，您可以使用字符串操作或正则表达式来查找URL。 然后，您可以创建要添加的jquery内容：

 var content = $('https://stackoverflow.com/questions/1712847/find-all-youtube-links-with-js-jquery/...'); 

并使用jquery的操作方法将其添加到某些内容中

 var destination = $("body"); destination.append(content); 

要获得更多详细信息，您的问题将需要更多详细信息。