How to wrap content before string value?

I have a list of:

<li> key1 : value1 </li>
<li> key2 : value2 </li>

and wa开发者_如何学Pythonnt to wrap the keys with <b>. As shown

<li> <b>key1</b> : value1 </li>
<li> <b>key2</b> : value2 </li>

Try this

var content;
$("li").each(function(){
  content = $(this).text().split(":");
  $(this).html("<b>" + content[0]+" </b>: "+ content[1]);
});

Something like:

$(document).ready(function(){
    $('li').each(function(){
        var text = $(this).text().split(':'); 
        $(this).html('<b>' + text[0] + '</b>:' + text[1]);
    });
});

More concise versions of the other answers:

$('li').html(function(i, html) {
    return html.replace(/([^:]+)/, '<b>$1</b>');
});

$("li").html(function(i, html) {
    var content = html.split(":");
    return "<b>" + content[0] +"</b>:"+ content[1];
});

And the regexp solution

$('li').each(function(){
    var el = $(this);
    el.html( el.text().replace(/([^:]+)/,'<b>$1</b>') );
})

demo at http://jsfiddle.net/gaby/tjVeR/