Question

我要做的是换掉对YouTube个视频的任何对象引用，并将其替换为缩略图引用，并调用传递YouTube ID的内部方法。

示例正文文本可能如下所示：

This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test 

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Qw_uJCnL_Ls&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Qw_uJCnL_Ls&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test This is a my test 

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Qw_uJCnL_Ls&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Qw_uJCnL_Ls&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

我希望正则表达式做的是输出如下：

<img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID/default.jpg" onclick="handleOpenMeidaBox("youtube", YOUTUBE_VIDEO_ID)" />

它基本上从对象标签中删除了YOUTUBE_VIDEO_ID，它是“v /”和下一个“＆amp;”之间的值。例如“Qw_uJCnL_Ls”就在这个例子中：http://www.youtube.com/v/Qw_uJCnL_Ls&

我正在考虑将其分解为一堆较小的易于管理的块，但试图避免所有嵌套循环。任何想法都会很棒！

Answer 1

由于您使用的是JavaScript，因此将DOM作为字符串处理是没有意义的 - 您可以通过浏览器对其进行解析和准备。例如，这段代码使用jQuery来实现你想要的东西，并且比正则表达式更不容易出错（特别是因为你的用户粘贴HTML - 它可以是任何格式）

$(document).ready(function(){
  //create new content
  var newDom = $('<div />').html(str);
  $('object', newDom).each(function(){
    //find the youtube video id
    var youtubeID = $(this).find("param[value*='youtube.com/v/']").attr('value');
    youtubeID = youtubeID .match(/youtube\.com\/v\/(\w+)/)[1];
    //create new img and add it to the dom
    var img = $('<img />', {
      src: 'http://img.youtube.com/vi/'+ youtubeID +'/default.jpg',
      click: function(){handleOpenMeidaBox('youtube', youtubeID);}
    })
    .insertAfter(this);
  }).remove(); //remove the <object>
  //add the new dom to the page
  $('body').append(newDom);
});

示例：http://jsbin.com/isoqu3

原始答案：

虽然通常建议use a parser to read html，但如果您的输入始终如此，则可以使用此正则表达式：

<object.*?youtube\.com/v/(\w+).*?object>

并替换为：

<img src="http://img.youtube.com/vi/$1/default.jpg" onclick="handleOpenMeidaBox('youtube', '$1')" />

要在JavaScript中使用它，你必须逃避一些斜杠：

str = str.replace(/<object.*?youtube\.com\/v\/(\w+).*?object>/g,
      "<img src='http://img.youtube.com/vi/$1/default.jpg'onclick=\"handleOpenMeidaBox('youtube', '$1')\" />");

JavaScript多步正则表达式查找和替换

1 个答案: