Как обернуть содержимое перед строковым значением?

Question

У меня есть список:

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

и хотите обернуть keys с <b>.Как показано

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

Answer 1

Попробуйте это

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

Answer 2

Более краткие версии других ответов:

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

Answer 3

Что-то вроде:

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

Answer 4

И решение регулярного выражения

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

демо на http://jsfiddle.net/gaby/tjVeR/