How do I bold certain parts of text with jQuery?

Question

For example, I have the HTML...

<span class="userscontentname">Test</span>
<span class="userscontentname">Testman</span>

then I have the jQuery...

  if ($("#userlist_"+search_id+" > span.userscontentname:contains("+search_text+")").length > 0) {
   $("#userlist_"+search_id).show();
   $("#userlist_"+search_id+" > span.userscontentname:contains("+search_text+")").css("font-weight", "bold");
  }

If the search_text is Test...

It will bold both Test and Testman completely. How do I make it so that it will only bold Test leaving out man in the second span?

Thanks!

Answer 1

http://www.jquery.info/spip.php?article50

Answer 2

Take a look on the jQuery highlight plugin.

Just change the CSS to

.highlight { font-wight: bold; }