jquery: radio button replacement and keyword matching

I want to replace my radio buttons with images, here is my html which will be generated by the system,

<ul>
    <li><input type="radio" name="id" value="68135112" title="Default / Default Title / Small" class="button-replace-size"/></li>
    <li><input type="radio" name="id" value="70365102" title="Default / Default Title / Medium" class="button-replace-size"/></li>
    <li><input type="radio" name="id" valu开发者_如何学Ce="70365152" title="Default / Default Title / Large" class="button-replace-size"/></li>
    <li><input type="radio" name="id" value="70365162" title="Default / Default Title / Extra Large" class="button-replace-size"/></li>
</ul>

I want the jquery script to check if the title text in radio input contains certain keywords or letters, then replace that radio button accordingly.

For instance, if it is found that radio button contains the keyword - 'Small', or 'small', or even 's', then replace this button with this <a> tag which will be styled in css into an image,

<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>

and this will be the same case if the keyword - 'Medium', or 'medium' is found...

here is the jquery that I am stuck at,

if ($(':contains("Small")',$this_title).length > 0)

below is the script I have come out so far...

  this.replace_element_radio_size = function(){

    /* radio button replacement - loop through each element */
    $(".button-replace-size").each(function(){

        if($(this).length > 0)
        {
            $(this).hide();
            var $this = $(this);
            var $this_title = $this.attr('title');

            if ($(':contains("Small")',$this_title).length > 0)
            {
                 $(this).after('<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>');


            }
        }
    }
}

please give me some ideas to make it... thanks.

Here's a solution using regular expressions to match the title and pick out the type:

$(function(){

    var replacement = $('<a href="#" class="button-size hide-text"></a>');

    $('input:radio').each(function(){
        var $this = $(this),
            type = $this.attr('title').match(/Default Title \/ (.+)$/);

        if (type.length > 1) {
            var shortType = type[1].substring(0,1).toLowerCase();
            $(this).replaceWith(
                replacement.clone()
                    .attr('id', 'button-'+shortType)
                    .attr('title', 'Click here to select '+type[1])
                    .text(shortType)
            );
        }
    });

});

You can see the above in action on jsFiddle.

You just need to do this

$('input[title*="Small"]').replaceWith("<img src=sample.jpg>")

This will replace all input element which title contains word "Small" with an image or to be more in line with your requirement

$('input[title*="Small"]').replaceWith('<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>')