JavaScript Regex — पैटर्न से Text जाँचना सीखें
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
हाथ से text जाँचना धीमा काम है: क्या यह 10 अंकों का mobile number है? क्या इस email में @ और dot है? Regular expression — छोटा नाम regex — text के लिए एक साँचा है। आप शक्ल एक बार बता देते हैं, और पैटर्न किसी भी text को एक ही कदम में उससे जाँच लेता है। Regex पहले गुप्त code जैसा लगता है, लेकिन वह कुछ छोटे-छोटे टुकड़ों से बना है, और यह आपको हर input के लिए दस if-statement लिखने से बचा लेता है।
test() — क्या यह match करता है?
let mobilePattern = /^\d{10}$/;
mobilePattern.test("9876543210"); // true
mobilePattern.test("98765"); // false
Regex literal दो slashes के बीच बैठता है: /pattern/। अंदर, \d का मतलब है "एक अंक", {10} का मतलब है "ठीक दस ऐसे", ^ का मतलब है "text यहीं से शुरू होना चाहिए" और $ का मतलब है "text यहीं खत्म होना चाहिए"। सब मिलाकर, /^\d{10}$/ का मतलब है "पूरा text, शुरू से आखिर तक, ठीक दस अंक होना चाहिए"। test() सिर्फ true या false देता है — इससे ज़्यादा कुछ नहीं, और validation की जाँच के लिए यही चाहिए भी।
^ और $ कभी मत भूलिए। इनके बिना, /\d{10}/ किसी भी ऐसे text से match कर जाएगा जिसमें कहीं भी दस अंक हों — तो "my number is 9876543210, call me" भी pass हो जाएगा। ये anchors पूरे text को पैटर्न बनने पर मजबूर करते हैं, न कि सिर्फ उसके एक हिस्से को।match() — क्या-क्या match हुआ?
let text = "Call me on 9876543210 or 9123456780";
text.match(/\d{10}/g); // ["9876543210", "9123456780"]
जहाँ test() हाँ या ना में जवाब देता है, वहीं match() आपको दिखाता है कि क्या-क्या match हुआ। Closing slash के बाद वाला अक्षर g का मतलब है "global" — सिर्फ पहला नहीं, हर match ढूँढिए। Email के लिए पैटर्न में असली dot चाहिए: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ — एक या ज़्यादा ऐसे अक्षर जो space या @ न हों, फिर @, फिर ऐसे ही और अक्षर, फिर एक dot, फिर और अक्षर। Dot से पहले वाला backslash ज़रूरी है: सादा dot का मतलब है "कोई भी अक्षर", लेकिन \. का मतलब है "असली dot"।
test() इस्तेमाल कीजिए, और जब टुकड़े खुद चाहिए (किसी वाक्य से number, email या शब्द निकालना), तो match() इस्तेमाल कीजिए।आम गलतियाँ
^और$भूल जाना — तब पैटर्न पूरे text से नहीं, उसके एक हिस्से से match कर जाता है।- Dot को escape करना भूल जाना — email पैटर्न में सादा dot किसी भी अक्षर से match करता है;
\.असली dot से match करता है। - Regex को quotes में लपेट देना — "/^\d{10}$/" एक string है, पैटर्न नहीं। उसे slashes के बीच, बिना quotes के लिखिए।
match()को बिनाgflag के इस्तेमाल करके सारे matches की उम्मीद करना —gके बिना सिर्फ पहला match मिलता है।
याद रखें
- Regex literal /pattern/ जैसा दिखता है;
\dएक अंक है,{n}का मतलब है "ठीक n"। ^शुरुआत को और$आखिर को बाँधता है — validation के लिए दोनों इस्तेमाल कीजिए।pattern.test(text)true या false देता है।text.match(pattern)जो match हुआ वह देता है; सब कुछ ढूँढने के लिएgजोड़िए।- test पूछता है, match दिखाता है।
उदाहरण समझिए
let mobilePattern = /^\d{10}$/;— पूरा text ठीक दस अंक होना चाहिए, न उससे पहले कुछ, न उसके बाद कुछ।mobilePattern.test(mobile)— mobile पैटर्न से मिलने पर true, वरना false।let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;— text, फिर @, फिर text, फिर असली dot, फिर text।emailPattern.test(email)— priya@example.com जैसे सही शक्ल वाले email के लिए true।- नतीजे वाली जगहें "Valid" के लिए हरी और "Invalid" के लिए लाल हो जाती हैं — visitor को जवाब हर field के बगल में ही दिख जाता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Regex Checker</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 360px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
input { width: 200px; padding: 6px; margin: 4px 0; }
#mobileOut, #emailOut { font-weight: bold; }
</style>
</head>
<body>
<h1>Regex Checker</h1>
<div class="card">
<p>Mobile: <input id="mobile" type="text" value="9876543210"></p>
<p id="mobileOut">Not checked yet.</p>
<p>Email: <input id="email" type="text" value="priya@example.com"></p>
<p id="emailOut">Not checked yet.</p>
<p><button onclick="checkAll()">Check both</button></p>
<p>Try it: click "Check both" — both fields turn green. Now change the mobile to 98765 and check again.</p>
</div>
<script>
function checkAll() {
let mobile = document.getElementById("mobile").value.trim();
let email = document.getElementById("email").value.trim();
let mobilePattern = /^\d{10}$/;
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
let mobileOut = document.getElementById("mobileOut");
let emailOut = document.getElementById("emailOut");
if (mobilePattern.test(mobile)) {
mobileOut.textContent = "Valid mobile number.";
mobileOut.style.color = "green";
} else {
mobileOut.textContent = "Invalid - mobile must be exactly 10 digits.";
mobileOut.style.color = "red";
}
if (emailPattern.test(email)) {
emailOut.textContent = "Valid email address.";
emailOut.style.color = "green";
} else {
emailOut.textContent = "Invalid - email must look like name@example.com.";
emailOut.style.color = "red";
}
}
</script>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. /^\d{10}$/ का मतलब क्या है?
शुरू से आखिर तक पूरा टेक्स्ट ठीक दस अंकों का होना चाहिए — ^ शुरुआत, $ अंत, और \d का मतलब एक अंक है।
2. test() और match() में क्या फर्क है?
test() सिर्फ true या false बताता है, जबकि match() दिखाता है कि क्या मैच हुआ — g flag के साथ पहला ही नहीं, हर मैच।
3. Pattern में ^ और $ क्यों नहीं भूलने चाहिए?
इनके बिना pattern दस अंक कहीं भी मिलने पर पास हो जाएगा, इसलिए नंबर वाला वाक्य भी गलत तरीके से पास हो जाएगा।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
