Maharashtra's Most Trusted
with more than
0
members
Chapter 5 - Regular Expression, Rollover & Frames
For MSBTE Diploma CO / IT / AIML Branch
Define Regular Expression -:
In JavaScript, a Regular Expression (often abbreviated as RegEx) is a pattern used to match character combinations in strings. It allows you to search, replace, and manipulate strings using powerful pattern matching.
Syntax of Regular Expressions:
In JavaScript, regular expressions are created in two ways:
Using Regular Expression Literals:
- Syntax:
/pattern/modifiers - Example:
/abc/i
- Syntax:
Using the
RegExpConstructor:- Syntax:
new RegExp("pattern", "modifiers") - Example:
new RegExp("abc", "i")
- Syntax:
Basic Components of Regular Expressions:
- Pattern: Defines the text you want to match.
- Modifiers (flags): Add extra functionality, like case insensitivity.
Basic Example -:
Matching Digits & Non-Digits-:
In regular expressions, matching digits and non-digits is a common task, and JavaScript provides shorthand character classes to help achieve this.
Matching Digits:
- The shorthand for matching digits (0-9) is
\d. - It matches any single digit character.
Matching Non-Digits:
- The shorthand for matching non-digits (anything other than 0-9) is
\D. - It matches any character that is not a digit.
Regular Expression Object Properties -:
Important Example -:
Validating Phone number using regular expression .
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Phone Number Validation</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 50px auto;
}
input[type=”text”], input[type=”submit”] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<div class=”container”>
<h2>Phone Number Validation</h2>
<form id=”phoneForm”>
<label for=”phone”>Enter Phone Number:</label>
<input type=”text” id=”phone” name=”phone” placeholder=”Enter your phone number” required>
<input type=”submit” value=”Submit”>
<p id=”errorMessage” class=”error”></p>
</form>
</div>
<script>
document.getElementById(“phoneForm”).addEventListener(“submit”, function(event) {
// Prevent form submission
event.preventDefault();
// Get the phone number input
let phoneInput = document.getElementById(“phone”).value;
// Regular expression for validating phone numbers
let phonePattern = /^[0-9]{10}$/;
// Get the error message element
let errorMessage = document.getElementById(“errorMessage”);
// Validate the phone number
if (phonePattern.test(phoneInput)) {
errorMessage.textContent = “Phone number is valid!”;
errorMessage.style.color = “green”;
} else {
errorMessage.textContent = “Invalid phone number! Please enter a 10-digit number.”;
errorMessage.style.color = “red”;
}
});
</script>
</body>
</html>
Validating Email using regular expression .
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Email Validation</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 50px auto;
}
input[type=”text”], input[type=”submit”] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<div class=”container”>
<h2>Email Validation</h2>
<form id=”emailForm”>
<label for=”email”>Enter Email Address:</label>
<input type=”text” id=”email” name=”email” placeholder=”Enter your email” required>
<input type=”submit” value=”Submit”>
<p id=”errorMessage” class=”error”></p>
</form>
</div>
<script>
document.getElementById(“emailForm”).addEventListener(“submit”, function(event) {
// Prevent form submission
event.preventDefault();
// Get the email input value
let emailInput = document.getElementById(“email”).value;
// Regular expression for validating email addresses
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
// Get the error message element
let errorMessage = document.getElementById(“errorMessage”);
// Validate the email address
if (emailPattern.test(emailInput)) {
errorMessage.textContent = “Email is valid!”;
errorMessage.style.color = “green”;
} else {
errorMessage.textContent = “Invalid email address! Please enter a valid email.”;
errorMessage.style.color = “red”;
}
});
</script>
</body>
</html>
end of part 1 -------->
Explore Other Chapters