jQuery Code/Script To Make The First Word Bold

Overview:

In this tutorial i am going to explain about how to make the first word bold using jQuery script. For this using regular expression i am finding the first word from the target element and then adding the <strong> tag to that word then replacing it in the target.


Description:

For explanation purpose i have created a html file with a div contains some text inside <p> tag. My goal here is i have to take the text from the p tag and i have to make the first word bold using jQuery. Below is the entire html and jQuery script which i used.

Code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Make The First Word Bold</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

    <h2>Actual Text</h2>

    <div>

        <p>This is first sentence.</p>

        <p>Second sentence will start here.</p>

        <p>It is third sentence.</p>

        <p>Example Text Goes HERE.</p>

        <p>Good Morning Guys</p>

        <p>I am the boss</p>

    </div>

    <h2>Actual Text With First Word Bold</h2>

    <div id="links">

        <p>This is first sentence.</p>

        <p>Second sentence will start here.</p>

        <p>It is third sentence.</p>

        <p>Example Text Goes HERE.</p>

        <p>Good Morning Guys</p>

        <p>I am the boss</p>

    </div>

    <script type="text/javascript">

        $('#links p').each(function () {

            var me = $(this);

            me.html(me.text().replace(/(^\w+)/, '<strong>$1</strong>'));

        });

    </script>

</body>

</html>

Now if you open the html file in the browser the output will look like below.

Source Code:

You can download the entire sourcecode below.

You May Also Like...

• How To Convert JSON Data Into Html Table Using Javascript jQuery
• Show hide password characters using javascript,jquery
• Toggle Checkbox Checked Property Using jQuery
• Check a checkbox using jQuery or JavaScript?
• Code to get all form element values using JQuery
• Check div/element/object is visible or hidden using Jquery
• Move items in drop down list from left to right using jQuery
• Add remove select and set items in select drop down list
• Bind unbind event in jQuery