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&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>

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!

Just making sure: you tagged it `preg-replace` , so I assume you do it from PHP. Using JavaScript you have the DOM ready, so it is easy to replace element. — Kobi, Feb 04 '10 at 18:05
Sorry, that was my fault for adding preg-replace. As for JavaScript and using the DOM, could I do that even if there are no ID's in the object tag. In my case the data is user generated, typically cut and paste embed code from youtube. There is no id for me to search for. It definitely makes more sense to do it using DOM if i can. — abritez, Feb 04 '10 at 21:02

score 0 · Answer 1 · edited May 23 '17 at 12:19

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')\" />");

Not sure what i am doing wrong. I ran your RegEx on several testers and it works perfectly, however when I try it using pure javascript it doesn't work as expected. I am guessing that the testers i used used something other then javascript. Would it be possible that one of the commands doesn't carry over? Or more likely, did I miss something? stripYoutube = originalHTML.replace('', 'g'), 'YOUTUBE_STRIPPED') — abritez, Feb 04 '10 at 23:11
Instead of the `.*?` lazy-dot-star, you may want to use `[\S\s]*?` instead (to allow for linefeeds in the object). — ridgerunner, Apr 19 '11 at 02:36

JavaScript multistep regular expression find and replace

1 Answers1