javascript - 在标识符后面加粗文本字符串

Question

<ul>
<li>Name: Billy</li>
<li>Phone: 0000000000</li>
<li>Email: info@email.com</li>
</ul>

我正在尝试使所有值（在分号之后:）变为粗体，例如Billy等。我如何使用 jQuery 完成此操作？

它应该如下所示：

• 姓名：比利
• 电话：0000000000
• 邮箱：info@email.com

Answer 1

尝试这样的事情：

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

Answer 2

这应该工作

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

它拆分“：”上的当前文本，然后将标签添加到后半部分。

小提琴：http: //jsfiddle.net/u6vHD/

Answer 3

这会起作用

$(function () {
    $('li').each(function(){
        $(this).html($(this).html().replace(/:\s*(.+)$/gi, ": <b>$1</b>"));
    })
});

Answer 4

<ul>
    <li>Name: <span>Billy</span></li>
    <li>Phone: <span>0000000000</span></li>
    <li>Email: <span>info@email.com</span></li>
</ul>

并使用下面的代码

$('li > span').each(function(){
 $(this).contents().wrapAll("<b/>");
});

演示

Answer 5

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

jsFiddle 演示

Answer 6

您可以添加一个额外的元素，并使用 CSS 完成所有操作：

CSS

ul li span{
font-weight:bold;
}

HTML

<ul>
<li>Name: <span>Billy</span></li>
<li>Phone: <span>0000000000</span></li>
<li>Email: <span>info@email.com</span></li>
</ul>

我看到这种情况发生的唯一方法是将要突出显示的文本包装在包装器（span、div 等）中。我还没有看到一种在没有包装元素的情况下选择性地将文本包装为粗体的方法。您可以使用 jquery 来修改给定文本的样式（如果已包装）...

$("ul#somename li span").style("font-weight", "bold");

或者

$("ul#somename li span").addClass('someBoldClass');

Answer 7

<ul>
 <li>Name: Billy</li>
 <li>Phone: 0000000000</li>
 <li>Email: info@email.com</li>
</ul>


$('ul li').each(function(i){
  var litext = $(this).text(); 
  var arrayli = litext.split(' ');
  var bold = "<b>" + arrayli[1] + "</b>";
  $(this).text(arrayli[0] + ' ' + bold);
});