用jQuery下拉大胆的第一个单词

Question

好吧,我有这个下拉菜单,我想在导航的主要级别加粗第一个单词.请在下面的代码中查看哪些内容带有注释.

为了说清楚,我希望将单词Our,Lorem和Another包装在strong标签或span标签中,因为它们是导航主级别中的第一个单词.我怎样才能用jQuery实现这个目标？

<ul class="clearfix" id="topnav">
  <li class="mainNavFirst"><a href="/">Our Home</a></li> <!-- bold this 'our' -->
  <li class="mainNavMiddle"><a href="#">Lorem Ipsum</a><!-- bold this 'Lorem' -->
    <div>
      <ul>
        <li class="sectionTitle">
          <h2><a href="#">Ipsum Lorem</a></h2>
        </li>
        <li><a href="#">Just a random link</a></li>
        <li><a href="#">Just a random link</a></li>
      </ul>
      <ul>
        <li class="sectionTitle">
          <h2><a href="#">Ipsum Lorem</a></h2>
        </li>
      </ul>
    </div>
  </li>
  <li class="mainNavLast"><a href="#">Another Link</a></li><!-- bold this 'Another' -->
</ul>

Answer 1

$('#topnav > li > a').html(function(i,html){
    return html.replace(/^\s*([^\s]+)(\s|$)/, '<span>$1 </span>');
});

http://jsfiddle.net/LKXKs/3/

编辑：修复了它，这样如果 中只有一个单词<a>，或者有前导空格，它仍然可以工作。