I have a unordered list that contains

<ul id="strip">
     <li><a href="#"><span>This-is a test string</span></a></li>
    <li><a href="#"><span>This is without</span></a></li>
     <li><a href="#"><span>New-test</span></a></li>
</ul>

I need to bold the text before the "-", so in the first <li> "This" is bolded.

I'm stuck in the loop where I should find the "-".

NB: Regular JavaScript, no JQuery :-)

I have a unordered list that contains

<ul id="strip">
     <li><a href="#"><span>This-is a test string</span></a></li>
    <li><a href="#"><span>This is without</span></a></li>
     <li><a href="#"><span>New-test</span></a></li>
</ul>

I need to bold the text before the "-", so in the first <li> "This" is bolded.

I'm stuck in the loop where I should find the "-".

NB: Regular JavaScript, no JQuery :-)

• javascript

• 1 i'm simply curious: why no jQuery? – Scott Evernden Commented Aug 13, 2009 at 6:59
• Is the down vote for 'no jQuery'? – rahul Commented Aug 13, 2009 at 7:02
• My bad, didn't read the "no jQuery" part. Sorry! – Gabriel Hurley Commented Aug 13, 2009 at 7:20

1 Answer 1

Use stringObject.replace(findstring,newstring) method.
In your case liString.replace(/\b(.*?-.*?)\b/,"<strong>$1</strong>")
full solution:

var lists = document.getElementsByTagName("li");
var listsL = lists.length;

for (var i = 0; i < listsL; ++i){
   liString = lists[i].innerHTML;
   liString = liString.replace(/\b([^-]*-[^\b]*?)\b/,"<strong>$1</strong>");
   lists[i].innerHTML = liString;
}