JavaScript multistep regular expression find and replace

Question

What I am trying to do is swap out any object references to YouTube videos, and replace them with their thumbnail reference along with a call to an internal method which passes the YouTube ID.

A sample body text may look like this:

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&amp;hl=en_US&amp;fs=1&amp;"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Qw_uJCnL_Ls&amp;hl=en_US&amp;fs=1&amp;" 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&amp;hl=en_US&amp;fs=1&amp;"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Qw_uJCnL_Ls&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

What I would like the regex to do is output something like this:

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

It basically strips out the YOUTUBE_VIDEO_ID from the object tags which is the value between the "v/" and the next "&" such as "Qw_uJCnL_Ls" is in this example: http://www.youtube.com/v/Qw_uJCnL_Ls&

I was thinking of breaking this down into a bunch of smaller easier to manage blocks, but was trying to avoid all the nested loops. Any ideas would be great!

Answer 1

Since you're using JavaScript, it makes little sense to work on the DOM as a string - you can have it parsed and ready by the browser. For example, this code is using jQuery to achieve what you want, and is less error prone than a regex (specially because your users paste HTML - it can be on any format)

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

Example: http://jsbin.com/isoqu3

---

original answer:

While it is generally recommended to use a parser to read html, if your input will always be like that you can use this regex:

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

and replace with:

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

To use it in JavaScript you'll have to escape some slashes:

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