current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 2 down vote favorite

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);
share|improve this question
1  
Have you tried chaining them? – BCdotWEB yesterday
1  
Could you kindly update the post with a sample html code so we can see the content of #myContents – Tolani Jaiye-Tikolo yesterday
up vote 4 down vote accepted

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');

...
share|improve this answer
up vote 0 down vote

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:

Regex Visualization

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.