JavaScript replace() में निपुणता: रेगैक्स, कॉलबैक्स और बेस्ट प्रैक्टिसेज़ के साथ संपूर्ण गाइड

目次

1. परिचय

जावास्क्रिप्ट वेब विकास में सबसे व्यापक रूप से उपयोग की जाने वाली प्रोग्रामिंग भाषाओं में से एक है। विशेष रूप से, उपयोगकर्ता इनपुट को संभालते समय या डेटा प्रसंस्करण करते समय स्ट्रिंग मैनिपुलेशन एक सामान्य कार्य है। इनमें से, replace() विधि को एक शक्तिशाली उपकरण के रूप में जाना जाता है जो स्ट्रिंग प्रतिस्थापन को सरल और कुशल बनाता है। इस लेख में, हम जावास्क्रिप्ट replace() विधि को विस्तार से समझाएंगे, बेसिक्स से लेकर उन्नत तकनीकों तक। हम न केवल बुनियादी उपयोग को कवर करेंगे बल्कि नियमित अभिव्यक्तियों का उपयोग करके उन्नत प्रतिस्थापन और व्यावहारिक उदाहरण भी, जो शुरुआती और मध्यवर्ती डेवलपर्स दोनों के लिए उपयोगी बनाता है।

2. replace() विधि के बेसिक्स

replace() विधि क्या है?

replace() विधि एक अंतर्निहित जावास्क्रिप्ट फंक्शन है जो स्ट्रिंग के विशिष्ट भागों को एक अन्य स्ट्रिंग से प्रतिस्थापित करने के लिए उपयोग की जाती है। इस विधि के साथ, आप स्ट्रिंग डेटा को कुशलतापूर्वक संपादित या परिवर्तित कर सकते हैं।

सिंटैक्स

string.replace(pattern, replacement)
  • pattern : खोजने के लिए स्ट्रिंग या नियमित अभिव्यक्ति।
  • replacement : प्रतिस्थापन के लिए स्ट्रिंग, या एक कॉलबैक फंक्शन।

बुनियादी उपयोग

निम्नलिखित उदाहरण एक सरल स्ट्रिंग प्रतिस्थापन प्रदर्शित करता है:

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

इस कोड में, “world” स्ट्रिंग को “JavaScript.” से प्रतिस्थापित किया गया है।

नोट्स

  1. replace() केवल पहली मिलान को प्रतिस्थापित करता है।
  2. यदि आप सभी मिलानों को प्रतिस्थापित करना चाहते हैं, तो आपको g फ्लैग के साथ नियमित अभिव्यक्ति का उपयोग करने की आवश्यकता है।

3. नियमित अभिव्यक्तियों के साथ उन्नत प्रतिस्थापन

नियमित अभिव्यक्ति क्या है?

नियमित अभिव्यक्तियां स्ट्रिंग पैटर्न को दर्शाने के लिए उपयोग की जाने वाली शक्तिशाली उपकरण हैं। जावास्क्रिप्ट में, आप regex का उपयोग करके जटिल खोजों और प्रतिस्थापनों को आसानी से कर सकते हैं।

उदाहरण: नियमित अभिव्यक्तियों के साथ प्रतिस्थापन

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

फ्लैग्स के प्रकार

  • g : वैश्विक प्रतिस्थापन (सभी मिलानों को प्रतिस्थापित करें)
  • i : केस-अनदेखी प्रतिस्थापन
  • m : मल्टीलाइन मोड

उदाहरण: केस-अनदेखी प्रतिस्थापन

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. कई घटनाओं का प्रतिस्थापन

सभी मिलानों का प्रतिस्थापन

सभी मिलान वाली घटनाओं को प्रतिस्थापित करने के लिए, अपनी regex में g फ्लैग का उपयोग करें।

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

तकनीक: एक साथ कई विभिन्न स्ट्रिंग्स का प्रतिस्थापन

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

यह दृष्टिकोण आपको एक साथ कई पैटर्नों को प्रतिस्थापित करने की अनुमति देता है, जो कोड की पठनीयता में सुधार करता है।

5. कॉलबैक फंक्शनों के साथ गतिशील प्रतिस्थापन

कॉलबैक फंक्शन क्या है?

कॉलबैक फंक्शन प्रतिस्थापन प्रक्रिया के दौरान कॉल किया जाता है और मिलान जानकारी का उपयोग करके परिणाम को अनुकूलित कर सकता है।

गतिशील प्रतिस्थापन के उदाहरण

1. स्ट्रिंग क्रम का आदान-प्रदान

let text = "Tanaka, Taro";
let result = text.replace(/(w+), (w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. तिथि प्रारूप का रूपांतरण

let date = "2024-12-25";
let formattedDate = date.replace(/(d{4})-(d{2})-(d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. विशेष वर्णों और एस्केप अनुक्रमों का संचालन

विशेष वर्ण क्या हैं?

नियमित अभिव्यक्तियों में, कुछ वर्ण मेटाकैरेक्टर्स माने जाते हैं जिनका विशेष अर्थ होता है। उन्हें खोजों या प्रतिस्थापनों में शाब्दिक रूप से उपयोग करने के लिए, आपको एस्केप अनुक्रमों के साथ उन्हें एस्केप करने की आवश्यकता है।

विशेष अक्षरों वाले स्ट्रिंग्स को बदलना

उदाहरण 1: अवधि (डॉट) वाले स्ट्रिंग को बदलना

let text = "www.example.com";
let result = text.replace(/./g, "-");
console.log(result); // "www-example-com"

उदाहरण 2: डॉलर साइन हटाना

let price = "$1,000";
let result = price.replace(/$/g, "");
console.log(result); // "1,000"

HTML एस्केप कैरेक्टर्स को बदलना

उदाहरण: HTML टैग्स को एस्केप करना

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. व्यावहारिक उदाहरण और उन्नत तकनीकें

लाइन ब्रेक को
टैग में बदलना

let text = "HellonWorldnJavaScript";
let result = text.replace(/n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

URL पैरामीटर्स को बदलना

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

उपयोगकर्ता इनपुट को सैनिटाइज़ करना

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. नोट्स और सर्वोत्तम प्रथाएँ

केवल पहला मिलान बदला जाता है

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

केस सेंसिटिविटी पर ध्यान दें

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

विशेष अक्षरों के लिए एस्केप मिस होने से बचें

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[]]/g, "$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. निष्कर्ष

लेख का सारांश

  • बेसिक उपयोग: replace() मेथड की सिंटैक्स और सरल प्रतिस्थापन उदाहरणों की व्याख्या की गई।
  • रेजेक्स अनुप्रयोग: उन्नत प्रतिस्थापनों के लिए रेगुलर एक्सप्रेशन और फ्लैग्स का उपयोग कैसे करें, सीखा।
  • कॉलबैक फ़ंक्शन: व्यावहारिक उदाहरणों के साथ डायनामिक प्रतिस्थापन कैसे करें, कवर किया गया।
  • व्यावहारिक उदाहरण: वास्तविक दुनिया के अनुप्रयोगों जैसे URL मैनिपुलेशन और सैनिटाइज़ेशन में उपयोगी तकनीकों का परिचय दिया गया।
  • सर्वोत्तम प्रथाएँ: नोट्स और प्रदर्शन संबंधी विचारों को विस्तार से समझाया गया।

अंतिम विचार

जावास्क्रिप्ट का replace() मेथड एक बहुमुखी टूल है जिसे बेसिक से लेकर उन्नत परिदृश्यों में लागू किया जा सकता है। हम जावास्क्रिप्ट के बारे में उपयोगी जानकारी प्रदान करना जारी रखेंगे, इसलिए जुड़े रहें!

広告