How to make first word bold of all elements using jQuery ?

Last Updated : 31 Dec, 2020

In this article, we will make first word bold of all elements using jquery. To make the first word bold, we use html(), and text() methods.

html() Method: The html() method in jQuery is used to set or return the innerHTML content of the selected element.

Syntax: It sets the content of matched element.

$(selector).html(content)

text() Method: This method is used to set or return the text content of the element. While setting the content, it overwrites the content of all the matched elements. The returned content of text method() is used to return the text content of all matched elements.

Syntax: It sets the text content.

$(selector).text(content)

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        How to make first word bold 
        of all elements using jQuery? 
    </title> 
  
    <!-- Import jQuery cdn library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("p").each(function () { 
                var txt = $(this); 
                txt.html(txt.text() 
                .replace(/(^w+)/, '<strong>$1</strong>')); 
            }); 
        }); 
    </script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to make first word bold of 
        all elements using jQuery? 
    </h3> 
      
    <p>GFG is a computer science portal</p> 
   
    <p>Computer Science Portal</p> 
</body> 
  
</html>