Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to underline all words of a text using jQuery?
Underlining text is a common requirement in web development, and it can be done easily with the help of jQuery. In this article, we will see how to underline all words of a text using jQuery and learn the different methods to perform this.
Before we dive into the different methods, let's first understand the basic concept of jQuery. jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, and animation. It is designed to make things easier for web developers, and it does so by providing a simple syntax that is easy to read and write.
Different Methods to Underline all Words of a Text in jQuery
Let’s now see some of the different approaches to underline all words of a text in jQuery one by one in detail.
Approach 1: .css() Method
The first method to underline all the words of a given text is by using the .css() method in jQuery. The .css() method is used to get or set CSS properties for an element, and further it can also be used to underline a text by setting the "text-decoration" property to "underline".
Syntax
Below is the syntax to underline all words of a text using the .css() method in jQuery.
$(document).ready(function(){
$('p').css('text-decoration', 'underline');
});
Example
In this example, we have used the .css() method to add the "text-decoration: underline" style to the selected HTML element. We have then selected the <p> element using the $('p') selector and added the "text-decoration: underline" style to it using this method. Now, when the user clicks the button, the selected element is underlined.
<html>
<head>
<title>Underline Text using the .css() method </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2> Underline Text using the .css() method </h2>
<p>Tutorials Point Simply Easy Learning</p>
<button id="btn-underline">Underline Text</button>
<script>
$(document).ready(function() {
$('#btn-underline').click(function() {
$('p').css('text-decoration', 'underline');
});
});
</script>
</body>
</html>
Approach 2: Using the .wrapInner() Method
The second method to underline all the words of a given text is by using the .wrapInner() method in jQuery. This method is used in wrapping an HTML structure like <u>, around the content of an HTML element. Further, it is also used in wrapping a <u> tag around all words of the text.
Syntax
Below is the syntax to underline all words of a text using the .wrapInner() method in jQuery.
$(document).ready(function(){
$('p').wrapInner('<u></u>');
});
Example
In this example, we have used the .wrapInner() method to wrap the content of the selected element with the <u> tag that applies the underline style to the given text. Now, we have selected the <p> element using the $('p') selector and wrapped its content with the <u> tag using this method. Now, when the user clicks the button, the selected content gets wrapped with the <u> tag and gets the text underlined.
<html>
<head>
<title>Underline Text using the .wrapInner() method </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2> Underline Text using the .wrapInner() method </h2>
<p>Tutorials Point. Simply Easy Learning.</p>
<button id="btn-underline">Underline Text</button>
<script>
$(document).ready(function() {
$('#btn-underline').click(function() {
$('p').wrapInner('<u></u>');
});
});
</script>
</body>
</html>
Approach 3: Using the .each() Method
The last method to underline all the words of a given text is by using the .each() method in jQuery. The .each() method iterates over a set of HTML elements and also wraps a <u> tag around all words of the text to perform the underline operation.
Syntax
Below is the syntax to underline all words of a text using the .each() method in jQuery.
$(document).ready(function(){
$('p').each(function(){
$(this).html($(this).text().replace(/\b(\w+)\b/g, '<u>$1</u>'));
});
});
Example
In this example, we have used the .each() method that loops through each of the selected HTML element and replace its text with a new text that consists of the <u> tag applied to each word. Now, when the user clicks the button, the text of the selected element(s) is replaced with the new text that has the <u> tag applied to each word, which underlines the text.
<html>
<head>
<title>Underline Text using the .each() method </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2> Underline Text using the .each() method </h2>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<button id="btn-underline">Underline Text</button>
<script>
$(document).ready(function(){
$('#btn-underline').click(function(){
$('p').each(function(){
$(this).html($(this).text().replace(/\b(\w+)\b/g, '<u>$1</u>'));
});
});
});
</script>
</body>
</html>
Conclusion
In this article, we learned how to underline a text with the help of jQuery. We saw that jQuery consists of various methods to underline all the words of a text, including the .css() method, the .wrapInner() method, and the .each() method. The first method is used to get or set CSS properties for an element, and is also used in underlining a text by setting the "text-decoration" property to "underline". The second method i.e., wrapInner() method wraps an HTML structure around the content of an element and is further used to wrap a <u> tag around all words of the text. Lastly, we learned the .each() method that iterates over a set of elements to wrap a <u> tag around all words of the text and underline a text. With the help of the given methods, we can easily underline text in our web applications.
514 Views
