如何在字符串值之前包装内容？

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

就像是：

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

Answer 3

其他答案的更简洁版本：

$('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 4

和正则表达式解决方案

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

在http://jsfiddle.net/gaby/tjVeR/演示