javascript - jQuery 中传递的 HTML 中的 find()、each() 和 Replacewith()

Question

我有一些 HTML 代码，我将其传递给一个函数，该函数并不查找所有 iframe，用图像替换 iframe 代码，然后返回修改后的 html。但是，它似乎并没有替换返回的 html 中的 iframe 代码。我很确定我只是错误地引用了替换，但在网上找不到任何与我尝试做的类似的示例。它们都涉及搜索整个文档或在文档中显示 html 之后进行搜索。此 HTML 不是也不可能是由于应用程序要求而产生的。

请注意:我已经生成了 youtube 代码来替换 iframe 代码。问题在于执行替换。

function article_youtube_convert(html) {
    //go throught the iframes for youtube and convert them to embed

    $(html).find('iframe').each(function(i) {
                     alert(this.src);
        //ok what we need to do here is check if it's youtube 
        src_youtube = this.src;
        if(src_youtube.indexOf('http://www.youtube.com')!=-1){
           //so now we need the video id 
           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 = '<a id="tempvid" href="'+youtube_link+'"><img src="http://img.youtube.com/vi/'+youtube_id+'/0.jpg"/><br />View YouTube Video</a>';

            $(this).replaceWith(img_youtube);


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


}

更新

我决定尝试使用 externalHTML 方法，并用变量中的新替换文本替换文本，如下所示。我毫无问题地警告了完整的来源，但它仍然没有取代它。

jQuery.fn.outerHTML = function(s) {
    return s
    ? this.before(s).remove()
    : jQuery("<p>").append(this.eq(0).clone()).html();
};


function article_youtube_convert(passed) {
    //go throught the iframes for youtube and convert them to embed
    //alert('inside');
    newhtml = passed;
    //alert(newhtml);
    $(newhtml).find('iframe').each(function(i) {
                     //alert(this.src);
        //ok what we need to do here is check if it's youtube 
        src_youtube = this.src;
        if(src_youtube.indexOf('http://www.youtube.com')!=-1){
           //so now we need the video id 
           url_parts = src_youtube.split('/');
                                   alert('youtube vid');
           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 = '<a id="tempvid" href="'+youtube_link+'"><img src="http://img.youtube.com/vi/'+youtube_id+'/0.jpg"/><br />View YouTube Video</a>';
                                   alert('alert: '+$(this).outerHTML());
                                   sourcethe = $(this).outerHTML();
                                   passed.replace(sourcethe,img_youtube);
            //$(this).replaceWith(img_youtube);
                                   //alert($(this));


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


}

Answer 1

看起来您实际上并没有从该函数返回您想要的内容...

你从来没有真正改变你的方法中的html，你只是用它来做一些被丢弃的事情，然后返回你放入的内容。

你最可能想做的事情是这样的

var jqHtml = $(html);
...Do stuff to modify jqHtml...
return jqHtml.html();

我不确定也没有测试过的一件事是 .html() 是否返回您想要的内容。文档说它使用 elements innerHTML 属性，但我不确定这是否会为由字符串构造的 jquery 对象提供正确的结果(我认为应该如此)。

无论如何，这是你的基本问题，你根本没有修改html。 $(html) 正在获取 html 字符串的副本，而不是可以根据需要更新的对其的引用。