jQuery Code/Script To Make The First Word Bold

By
Advertisement
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.
Output of jQuery Code/Script To Make The First Word Bold

Source Code:

You can download the entire sourcecode below.
Source Code of jQuery Code/Script To Make The First Word Bold

You May Also Like...

0 comments:

Post a Comment

Online Casino