Using jQuery string replacements to make labels bold

Question

Instead of having multiple statements like the following, Is it possible to club them into one liner in jQuery?

       var replaced = $("#myContents").html().replace(/Employee:/g,'<b>Employee:</b>');
       $("#myContents").html(replaced);

       var replaced = $("#myContents").html().replace(/SSN:/g,'<b>SSN:</b>');
       $("#myContents").html(replaced);

       var replaced = $("#myContents").html().replace(/DOB:/g,'<b>DOB:</b>');
       $("#myContents").html(replaced);


       var replaced = $("#myContents").html().replace(/Start Date\/Time:/g,'<b>Start Date\/Time:</b>');
       $("#myContents").html(replaced);

       var replaced = $("#myContents").html().replace(/End Date\/Time:/g,'<b>End Date\/Time:</b>');
       $("#myContents").html(replaced);

Answer 1

I think yes, the ugliest I think is the follow:

// Define one regexp with all the piece you need and save
// the match with ()
var re = /(Employee|SSN|DOB|Start Date\/Time|End Date\/Time):/g

// Then change the replace as follow
var replaced = $("#myContents").html().replace(re, '<b>$1:</b>');

$("#myContents").html(replaced);

Of course you can compose your regexp as chunks as follow:

var terms = [];

...
terms.push("Employee");
...
terms.push("End Date\/Time");

...

var re = new RegExp("("+terms.join("|")+"):", 'g');

...

Answer 2

I'll suggest you to combine all the replacement strings in one and create a single regex. Also, use the html() with callback function.

$('#myContents').html(function (i, html) {
    // i: index - Number
    // html: The innerHTML of the current element - String

    // The returned string will be replaced as innerHTML of the current element
    return html.replace(/(Employee|SSN|DOB|(Start|End) Date\/Time):/g, '<b>$&</b>');
});

If using latest browser/environment that supports Arrow functions, the code can be made even smaller

$('#myContents').html((i, html) => html.replace(/(Employee|SSN|DOB|(Start|End) Date\/Time):/g, '<b>$&</b>'));

$& is the matched string here.

Why is this better?

1. Less DOM interactions. Using this code, there is only one DOM dive to get and set the updated innerHTML.
2. Single regex to replace multiple strings has better performance than multiple replaces with single string
3. Shorter code

Just in case, if the case(uppercase/lowercase) is different from the one used in regex, use i flag to make the match case-insensitive.

Here's Live Demo:

$('#myContents').html((i, html) => html.replace(/(Employee|SSN|DOB|(Start|End) Date\/Time):/g, '<b>$&</b>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myContents">
  <li>Employee: something</li>
  <li>SSN: something</li>
  <li>DOB: something</li>
  <li>Start Date/Time: something</li>
  <li>End Date/Time: something</li>
</ul>

Regex Visualization Diagram: