Wrap different style to specific text between

Question

Before I lose myself in words trying to explain what I mean, here's an example of what I'd like to achieve.

How it is now:

<ul>
<li>My name: Sietse</li>
<li>Country: The Netherlands</li>
</ul>

How I'd like it to be:

<ul>
<li><strong>My name:</strong> Sietse</li>
<li><strong>Country:</strong> The Netherlands</li>
</ul>

There is a lot of existing content on my website that is marked up like the first example, but is there a way to dynamically select and style the text until the (possibly including) the colon in the LI, as displayed in the second example?

Please note that I'm an absolute beginner in jQuery or any Javascript for that matter.

Thanks in advance.

Answer 1

Try following

$(function() {
  $("ul li").each(function() {
   if ($(this).text().indexOf(':') > -1) {
       $(this).html('<strong>' + $(this).html().split(':').join(':</strong>')); 
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>My name: Sietse</li>
  <li>Country: The Netherlands</li>
</ul>

Answer 2

You can use .html() and string replace() like

$('ul li').html(function (i, html) {
    return html.replace(/(.*?:)/, '<strong>$1</strong>')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>My name: Sietse</li>
    <li>Country: The Netherlands</li>
</ul>