jQuery: Make first word bold of all elements

Last update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

jQuery Practical exercise Part - I : Exercise-10

Make first word bold of all elements.

Sample HTML Code :

<body>
<p>PHP Exercises</p>
<p>Python Exercises</p>
<p>JavaScript Exercises</p>
<p>jQuery Exercises</p>
</body>

Expected Output :

PHP Exercises

Python Exercises

JavaScript Exercises

jQuery Exercises

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Make first word bold of all elements</title>
</head>
<body>
  <p>PHP Exercises</p>
  <p>Python Exercises</p>
  <p>JavaScript Exercises</p>
  <p>jQuery Exercises</p>
</body>
</html>

JavaScript Code :

$('p').each(function(){
	var pdata = $(this);
	pdata.html( pdata.text().replace(/(^\w+)/,'$1') );
});

See the Pen jquery-practical-exercise-10 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Limit character input in the textarea including count.
Next: Create a division using jQuery with style tag.