How to highlight lowercase letters using JavaScript?

This is a quick and dirty solution using regex search / replace.

var p = document.querySelector("p");
var html = p.innerHTML;

html = html.replace(/([a-z]+)/g, "<strong>$1</strong>");

p.innerHTML = html;

      

        
        
        
      

    

First you get a paragraph, you read its inner HTML. Then use a regex to search for lowercase letters az and wrap them with strong

HTML tags . You can also use span

and apply a CSS class if you like. After searching / replacing regular expressions, return HTML value.

Working example: http://jsbin.com/vodevutage/1/edit?html,js,console,output

EDIT : If you want to have a different color, change one line like this:

html = html.replace(/([a-z]+)/g, "<span class='highlight'>$1</span>");

      

        
        
        
      

    

and also define a CSS class like this:

.highlight {
    background-color: yellow;
}