जावास्क्रिप्ट में, एक स्ट्रिंग से व्हाइटस्पेस को फ़िल्टर करने के कई अलग-अलग तरीके हैं। यह लेख आपको यह दिखाने का प्रयास करता है कि आप अपने स्ट्रिंग्स में व्हाइटस्पेस वर्णों के साथ इसे पांच तरीकों से कैसे कर सकते हैं:
- लूप्स का उपयोग करना
- ऐरे मेथड का उपयोग करना:स्प्लिट/फ़िल्टर/जॉइन मेथड्स
- सरणी विधियों का उपयोग करना:विभाजित/शामिल हों
- बदलें विधि का उपयोग करना
लूप्स का उपयोग करना
जब हम लूप के लिए उपयोग करते हैं, तो हमें लूप से पहले एक नया स्ट्रिंग वेरिएबल घोषित करना होता है ताकि हम इसे जोड़ते ही जोड़ सकें।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//loop
let newStr = "";
for(let i = 0; i < str.length; i++) {
if(str[i] !== " ") {
newStr += str[i];
}
}
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html> लूप प्रत्येक व्यक्तिगत चरित्र को यह देखने के लिए देखता है कि क्या यह एक सफेद स्थान चरित्र है। यदि ऐसा नहीं है, तो यह इसे newStr वेरिएबल में जोड़ता है। यहां अपने उद्देश्य की पूर्ति के लिए, हम इसे दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) में सम्मिलित करते हैं ताकि हम इसे स्क्रीन पर देख सकें। यदि आपको इसे अपने कोड में कहीं और उपयोग करने की आवश्यकता है, तो आप newStr वेरिएबल वापस कर देंगे।
ऐरे मेथड का उपयोग करना:स्प्लिट/फ़िल्टर/जॉइन मेथड्स
ऊपर वर्णित लूप विधि से निकटता से संबंधित, विभाजन/फ़िल्टर विधि एक स्ट्रिंग लेती है, इसे एक सरणी में विभाजित करती है और फिर ES6 विधि फ़िल्टर का उपयोग करती है जो व्हाइटस्पेस को हटा देती है। इसे करने का तरीका यहां बताया गया है:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//split/Filter
const splitted = str.split('');
const filtered = splitted.filter(char => {
return char !== " ";
})
let newStr = filtered.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html> सरणी विधि का उपयोग करना:विभाजित/शामिल हों
पिछले खंड में, हमने स्ट्रिंग से रिक्त स्थान को हटाने के लिए स्प्लिट, फ़िल्टर और जॉइन का उपयोग किया था। वास्तव में, हमें केवल विभाजन और जुड़ने के तरीकों का उपयोग करने की आवश्यकता है यदि हम सरणी विधियों का उपयोग करते हैं। हमें बस इतना करना है कि अंतरिक्ष में विभाजित हो जाएं और फिर प्रत्येक चरित्र में शामिल हों!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//split/join
const splitted = str.split(' ');
let newStr = splitted.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html> कितना दिलचस्प छोटा शॉर्टकट है! आप अपनी पसंद के एक चरित्र पर विभाजित कर सकते हैं उस चरित्र को अपनी स्ट्रिंग से पूरी तरह से काट सकते हैं और फिर अपनी स्ट्रिंग प्राप्त करने के लिए अलग-अलग चरित्र पर एक साथ सरणी में शामिल हो सकते हैं।
बदलें विधि का उपयोग करना:
जब आप अपने स्ट्रिंग में सभी रिक्त स्थान को फ़िल्टर करने के लिए RegEx का उपयोग करना चाहते हैं तो प्रतिस्थापन विधि का उपयोग करना बहुत अच्छा होता है। हमें यहां रेगेक्स का उपयोग करने की आवश्यकता है क्योंकि परिभाषा के अनुसार प्रतिस्थापित करें, जो वह ढूंढ रहा है उसके पहले उदाहरण को प्रतिस्थापित करता है। यदि हमारे स्ट्रिंग में कई रिक्त स्थान हैं, तो प्रतिस्थापन विधि केवल पहला स्थान लेगी - जब तक कि हम सफेद स्थान की पहचान के लिए नियमित अभिव्यक्ति का उपयोग नहीं करते।
नियमित अभिव्यक्ति के अंत में वैश्विक ध्वज वह है जो हमें एक से अधिक उदाहरणों को खोजने और बदलने की अनुमति देता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
let regex = /\s+/g
let newStr = str.replace(" ", "");
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
\s एक व्हाइटस्पेस कैरेक्टर है और + इंगित करता है कि हम एक या अधिक व्हाइटस्पेस वर्णों की तलाश कर रहे हैं जो एक पंक्ति में समूहीकृत हैं। अभिव्यक्ति के अंत में g, एक अनुस्मारक के रूप में, इंगित करता है कि हम व्हॉट्सएप वर्णों के कई अलग-अलग समूहों की तलाश कर रहे हैं।
निष्कर्ष
इस लेख में हमने जावास्क्रिप्ट में भंडारण से सफेद स्थान निकालने के चार तरीकों को कवर किया है। हमने लूप्स, फिल्टर मेथड, स्प्लिट/जॉइन मेथड्स और रेगुलर एक्सप्रेशन का इस्तेमाल किया। जावास्क्रिप्ट में इन बुनियादी चीजों को करने का तरीका सीखने से आपको वे उपकरण मिलेंगे जिनकी आपको अपनी यात्रा में आगे बढ़ने पर जावास्क्रिप्ट में और भी अधिक जटिल समस्याओं को हल करने की आवश्यकता है!