Trouvez tous les liens de youtube avec js (jquery)

J'ai changé le content d'un identifiant vers une classe parce que je pensais que vous auriez plus d'une zone de contenu?

Je suis sûr qu'il existe un moyen beaucoup plus efficace de le faire, mais c'est ma tentative. Notez que je suck à regex, alors ce que j'ai est aussi proche que possible, je suis sûr que quelqu'un peut aider à l'améliorer, donc il ne faut pas remplacer le ?v= à l'intérieur de chaque boucle.

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> 

Scénario

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

Je serai le premier à admettre que ce n'est pas joli, mais ça marche. J'ai également collé une version active de ce code dans ce pastebin

Mise à jour: J'ai nettoyé le code un peu, voici comment il se présente maintenant ( démo ):

 $(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 = '<object width="' + vidWidth + '" height="' + vidHeight + '">' + '<param name="movie" value="http://www.youtube.com/v/[vid]&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/[vid]&hl=en&fs=1" ' + 'type="application/x-shockwave-flash" allowscriptaccess="always" ' + 'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' + vidHeight + '"></embed></object> '; $('.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=','')) ); }); } }); }); 

J'étais à peu près la même piste que fudgey, mais je suce un regexps encore plus que lui, alors j'ai "emprunté" son code jusqu'à ce point. Une modification que j'ai faite est d'utiliser swfobject pour intégrer la vidéo plutôt que de passer le code d'intégration. Cela signifie simplement que vous devez ajouter la bibliothèque swfobject à la page

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

HTML est le même que le fudgey's

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

Petit changement au 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"); }) } }) }) 

Félicitations à la réponse de Fudgey tho

Vous devrez obtenir le contenu de la div avec quelque chose comme ceci:

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

Avec ce texte, vous pouvez utiliser une manipulation de chaîne ou des expressions régulières pour trouver l'url. Ensuite, vous pouvez créer du contenu jquery à ajouter avec:

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

Et ajoutez-le à quelque chose avec les méthodes de manipulation de jquery, comme

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

Pour obtenir plus de détails que cela, votre question nécessitera plus de détails.