Trouver(), chacun() et replaceWith() dans le HTML passé en jQuery

Question

J'ai du code HTML que je passe à une fonction censée trouver tous les iframes, remplacer le code iframe par une image, puis renvoyer le HTML modifié. Cependant, il semble ne pas remplacer le code iframe dans le HTML retourné. Je suis assez sûr que je référence simplement mal le remplacement, mais je ne trouve aucun exemple en ligne similaire à ce que j'essaie de faire. Ils font tous référence à la recherche dans l'ensemble d'un document ou après l'affichage du HTML dans le document. Ce HTML n'est pas et ne peut pas être en raison des exigences de l'application.

Veuillez noter : J'ai déjà généré du code youtube pour remplacer le code iframe. Le problème réside dans l'exécution du remplacement.

function article_youtube_convert(html) {
    //parcourir les iframes pour youtube et les convertir en intégrations

    $(html).find('iframe').each(function(i) {
                     alert(this.src);
        //ok ce que nous devons faire ici, c'est vérifier s'il s'agit de youtube
        src_youtube = this.src;
        if(src_youtube.indexOf('http://www.youtube.com')!=-1){
           //maintenant nous avons besoin de l'identifiant de la vidéo
           url_parts = src_youtube.split('/');

           youtube_id = url_parts[url_parts.length-1];

           url_parts = youtube_id.split('?');
           youtube_id = url_parts[0];

           youtube_link = 'http://www.youtube.com/watch?v'+youtube_id;
           img_youtube = 'Voir la vidéo YouTube';

            $(this).replaceWith(img_youtube);

                     //alert(document.getElementById('tempvid').innerHTML);  
        }
    });
    return html;

}

MISE À JOUR

J'ai décidé d'essayer d'utiliser une approche outerHTML et de remplacer le texte par le nouveau texte de remplacement dans la variable comme indiqué ci-dessous. J'alerte la source complète sans problème, mais cela ne la remplace toujours pas.

jQuery.fn.outerHTML = function(s) {
    return s
    ? this.before(s).remove()
    : jQuery("

Answer 1

David, je viens de faire un test rapide et j'ai écrit une simple page HTML avec trois éléments iframe et j'ai copié votre code. J'ai enveloppé les iframes dans un élément

et appelé article_youtube_convert ("div#test");. Les iframes ont été remplacés sans problème.

Es-tu sûr de passer le bon contexte html à la fonction article_youtube_convert ?

Answer 2

Il semble que vous ne renvoyiez pas réellement ce que vous voulez de cette fonction...

Vous n'altérez jamais réellement html dans votre méthode, vous l'utilisez simplement pour effectuer certaines actions qui sont ensuite jetées et vous renvoyez ce que vous avez mis dedans.

Ce que vous voulez probablement faire est quelque chose comme

var jqHtml = $(html);
...Effectuez des modifications sur jqHtml...
return jqHtml.html();

Une chose sur laquelle je ne suis pas sûr et que je n'ai pas testée est si .html() renvoie ce que vous voulez. La documentation dit qu'elle utilise la propriété innerHTML des éléments mais je ne suis pas sûr que cela donnera la bonne chose avec les objets jQuery construits à partir de chaînes de caractères (je pense que cela devrait).

Quoi qu'il en soit, voilà votre problème de base, vous ne modifiez pas du tout html. $(html) prend une copie de la chaîne html, pas une référence à celle-ci qu'elle peut mettre à jour selon les besoins.

Answer 3

Je pense que tu veux

  url_parts = youtube_id.split('?');
  youtube_id = url_parts.pop();

Mais note que le youtube_id inclura le v=, donc tu pourrais faire : url_parts.pop().substring(2)