Javascript 使用js（jquery）查找所有youtube链接

假设有一个div有内容和youtube链接。我想抓取youtube链接并将其嵌入

<div id="content"><p>Here is a cool video.  Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0</p></div>

这是一段很酷的视频。过来看：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 <div id="yt-video">
        <object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/429l13dS6kQ&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
        </div>
        */
    }
});

$（“#内容”）。每个（函数（）{
var allContent=$（this.html（）；
//需要正则表达式来查找其中包含youtube的所有链接，当然不能==youtube.com，但基本上链接中必须包含youtube.com。
if（$（（“a”，allContent.attr（“href”）=“youtube.com”）{
//抓取youtube视频id
/*将链接替换为
*/
}
});

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

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

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

var content = $('<a href="...">...</a>');

---

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

我将

内容从id更改为类，因为我猜您会有多个内容区域

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

HTML

这是一段很酷的视频。过来看：http://www.youtube.com/watch?v=oHg5SJYRHA0 这个呢http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded

这是一个很酷的视频。过来看：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 = '<obj'+'ect width="' + vidWidth + '" height="' + vidHeight + '"><param name="movie" value="http://www.youtube.com/v/';
  var e2 = '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" ' +
   'value="always"></param><em'+'bed src="http://www.youtube.com/v/';
  var e3 = '&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + vidWidth +
   '" ' + 'height="' + vidHeight + '"></embed></object> ';

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

$（文档）.ready（函数（）{
//我在这里添加了视频大小，以防您想更轻松地修改它
可变宽度=425；
高度=344；
$（'.content:contains（“youtube.com/watch”））。每个（函数（）{
var，该值=$（此值）；
var txt=$（this.html（）；
//t这可以通过创建一个对象、添加属性和插入参数来完成，但这会更快
变量e1=''；
var vid=txt.match（/（\？v=）（\w[\w |-]*）/g）；//以？v=oHg5SJYRHA0结束
if（参考长度）{
$。每个（视频，功能（i）{
var ytid=this.replace（//\？v=/，“”）//以oHg5SJYRHA0结束
追加（e1+ytid+e2+ytid+e3）
})
}
})
})

我会第一个承认它不漂亮，但它很管用。我还将此代码的工作版本粘贴到


更新：我已经清理了一些代码，下面是它现在的样子（）：

$（文档）.ready（函数（）{
//我在这里添加了视频大小，以防您想更轻松地修改它
可变宽度=425；
高度=344；
var obj=''+
'' +
' ';
$（'.content:contains（“youtube.com/watch”））。每个（函数（）{
var，该值=$（此值）；
var vid=that.html（）
if（参考长度）{
$.each（vid，function（）{
append（obj.replace（/\[vid\]/g，this.replace（'v='，''）；
});
}
});
});
我和福吉走的几乎是同一条路，但我比他更喜欢正则表达式，所以在此之前我一直在“借用”他的代码。我所做的一个改变是使用swfobject来嵌入视频，而不是手动滚动嵌入代码。这只是意味着您必须将swfobject库添加到页面中

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>



HTML和福吉的一样

<div class="content"><p>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</p></div>
<div class="content"><p>Here is a cool video.  Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div>

这是一段很酷的视频。过来看：http://www.youtube.com/watch?v=oHg5SJYRHA0 这个呢http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded

这是一个很酷的视频。过来看：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("<div id='" + playerid + "'></div>");
                    swfobject.embedSWF("http://www.youtube.com/v/" + ytid, playerid, vidWidth, vidHeight, "8");                     
                })
            }
        })
    })

$（函数（）{
//我在这里添加了视频大小，以防您想更轻松地修改它
可变宽度=425；
高度=344；
$（'.content:contains（“youtube.com/watch”）。每个（函数（i）{
var，该值=$（此值）；
var txt=$（this.html（）；
var vid=txt.match（/（\？v=）（\w[\w |-]*）/g）；//以？v=oHg5SJYRHA0结束
if（参考长度）{
$。每个（视频，功能（x）{
var ytid=this.replace（//\？v=/，“”）//以oHg5SJYRHA0结束
var playerid='videoplayer\'+i+“\+x；
即。附加（“”）；
swfobject.embeddeswf（“http://www.youtube.com/v/“+ytid，playerid，vidWidth，vidHeight，”8“；
})
}
})
})

福吉的回答真是太好了，不过我已经用我现在的js更新了我的问题。我在我需要的东西或我坚持的东西上添加了评论。回答得好，唯一的改变是我的答案在下面。我还想删除youtube链接并用视频替换它，我怎么能做到呢？@Waseem：我更新了演示（），但我对regex仍然很差劲。我添加了这一行
that.html（函数（I，h）{返回h.replace（/（http:\/\/www.youtube.com\/watch\？v=\w+（\&\w+=\w+））？/g'，；}）<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

<div class="content"><p>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</p></div>
<div class="content"><p>Here is a cool video.  Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div>

$(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("<div id='" + playerid + "'></div>");
                    swfobject.embedSWF("http://www.youtube.com/v/" + ytid, playerid, vidWidth, vidHeight, "8");                     
                })
            }
        })
    })