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:
Now if you open the html file in the browser the output will look like below.
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
Comments
Post a Comment