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 contents = $(this).text().split(":");
    contents[1] = "<b>" + contents[1] + "</b>";
    $(this).html(contents[0] + ": " + contents[1]);
});

現在のテキストを「:」で分割し、タグを後半に追加します。

フィドル: http://jsfiddle.net/u6vHD/

Answer 2

<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 3

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

jsFiddle デモ

Answer 4

<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);
});

Answer 5

追加の要素を追加して、すべて 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');