How do I target the content of a element, using JQuery?

Question

I'm having trouble with a piece of code I'm using to build a widget. see below:

$(".number-plate").html(function(i, h) { 
   return h.replace(/(ANY|[A-Za-z0-9])/g, '<img src="plate-widget/$1.gif" />'); 
});

The problem is that this replaces the entire element, rather than just the content!

Is there a way of targetting the content of .number-plate ONLY?

Any help is Greatly Appreciated, Thanks

Answer 1

You could extract the node, modify it and replace it afterwards, like this:

var html = $(".number-plate").html();
$(".number-plate").html(html.replace(/(ANY|[A-Za-z0-9])/g, '<img src="plate-widget/$1.gif" />'));

Answer 2

(edit:) If you have more than one element with class number-plate, you can use:

$(".number-plate").each(function() {
   var $this = $(this);
   $this.html($this.html().replace(/(ANY|[A-Za-z0-9])/g, '<img src="plate-widget/$1.gif" />'); 
});