在jQuery中传递的HTML中查找()、每个()和replacewith()

Question

我有一些html代码，传递给一个函数，它意味着找不到所有的iframes，用图像替换iframe代码，然后返回修改后的HTML。但是，它似乎没有替换返回的html中的iframe代码。我很确定我只是错误地引用了hte替换，但在网上找不到任何类似我试图做的例子。它们都引用搜索整个文档或在文档中显示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;


}

更新

我决定尝试使用outerHTML方法，并在变量中用新的替换文本替换文本，如下所示。我没有问题地通知完整的源，但是它仍然没有替换它。

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()是否返回您想要的内容。文档说它使用了元素innerHTML属性，但我不确定这是否会给用字符串构造的jquery对象提供正确的东西(我认为应该这样做)。

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

Answer 2

David，我刚刚做了一个快速测试，用三个iframe元素编写了一个简单的HTML页面，并复制了您的代码。我将iframes封装在一个<div id="test">元素中，并称为article_youtube_convert ("div#test");。如果被完美地替换掉了。

<div id="test">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
</div>

您确定要将正确的html上下文传递给article_youtube_convert函数吗？

Answer 3

我想你想

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

但是请注意，youtube_id将包括v=，因此您可以这样做：url_parts.pop().substring(2)