जावास्क्रिप्ट और वाइट के साथ लोरेम इप्सम टेक्स्ट जेनरेटर कैसे बनाएं

लोरेम इप्सम वह टेक्स्ट है जिसे दुनिया भर के डेवलपर्स और डिज़ाइनर प्लेसहोल्डर के रूप में उपयोग करते हैं। यदि आप बहुत सारे यूआई प्रोटोटाइप के साथ इंटरैक्ट करते हैं, तो संभवतः आपने इसे पहले भी देखा होगा।

वाइट और जावास्क्रिप्ट के साथ एक लचीला लोरेम इप्सम जनरेटर बनाना सीखें और आप एक उपयोगी परिणाम के साथ अपने विकास कौशल का उपयोग करेंगे।

लोरेम इप्सम का इतने व्यापक रूप से उपयोग क्यों किया जाता है?

आप सोच रहे होंगे कि इतने सारे डेवलपर्स और डिज़ाइनर लोरेम इप्सम को क्यों चुनते हैं, जबकि वे किसी सार्वजनिक डोमेन पुस्तक या इसी तरह के किसी पृष्ठ को कॉपी कर सकते हैं। मुख्य कारण यह है कि यह उपयोगकर्ता या दर्शक को किसी दस्तावेज़ या प्रोटोटाइप के दृश्य रूप की समझ देता है, बिना प्लेसहोल्डर टेक्स्ट पर बहुत अधिक ध्यान केंद्रित किए।

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

लोरेम इप्सम इतनी व्यापक रूप से मान्यता प्राप्त है कि आपको यह निर्दिष्ट करने की भी आवश्यकता नहीं है कि यह एक प्लेसहोल्डर टेक्स्ट है - वस्तुतः हर कोई जो इसके पास आता है, तुरंत पहचान लेगा कि टेक्स्ट फिलर है।

प्रोजेक्ट और डेवलपमेंट सर्वर की स्थापना

इस प्रोजेक्ट में प्रयुक्त कोड a में उपलब्ध है गिटहब रिपॉजिटरी और यह आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए निःशुल्क है। की सामग्री कॉपी करें स्टाइल.सीएसएस और यह लोरेम.जे.एस फ़ाइलें बनाएं और उन्हें इन फ़ाइलों की अपनी स्थानीय प्रतियों में चिपकाएँ।

यदि आप इस प्रोजेक्ट का लाइव संस्करण देखना चाहते हैं, तो आप इसे देख सकते हैं डेमो.

आप इसका उपयोग कर रहे होंगे वाइट बिल्ड टूल चीज़ों को सेट करने के लिए. सुनिश्चित करें कि आपके पास Node.js और नोड पैकेज मैनेजर (एनपीएम) या यार्न आपकी मशीन पर स्थापित है, फिर अपना टर्मिनल खोलें और चलाएं:

एनपीएम वाइट बनाएं

या:

यार्न वाइट बनाएं

इसे एक खाली Vite प्रोजेक्ट को तैयार करना चाहिए। प्रोजेक्ट का नाम दर्ज करें, फ्रेमवर्क को "वेनिला" और वैरिएंट को "वेनिला" पर सेट करें। ऐसा करने के बाद, प्रोजेक्ट निर्देशिका पर नेविगेट करें सीडी आदेश दें, फिर चलाएँ:

एनपीएम मैं

या:

धागा

सभी निर्भरताएँ स्थापित करने के बाद, प्रोजेक्ट को अपनी पसंद के टेक्स्ट एडिटर में खोलें, फिर प्रोजेक्ट संरचना को कुछ इस तरह संशोधित करें:

अब, की सामग्री साफ़ करें Index.html फ़ाइल बनाएं और इसे निम्नलिखित से बदलें:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8" />
<जोड़नारिले="आइकन"प्रकार="छवि/एसवीजी+एक्सएमएल"href="/vite.svg" />
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1.0" />
<शीर्षक>लोरेम इप्सम जेनरेटरशीर्षक>
सिर>
<शरीर>
<एच 1>लोरेम इप्सम जेनरेटरएच 1>
<डिवपहचान="अनुप्रयोग">
<डिवकक्षा="नियंत्रण">
<प्रपत्र>
<डिवकक्षा="नियंत्रण">
<लेबलके लिए="डब्ल्यू-गिनती">प्रति अनुच्छेद शब्दलेबल>
<डिव>
<इनपुटप्रकार="श्रेणी"पहचान="डब्ल्यू-गिनती"मिन="10"अधिकतम="100"कीमत="25"कदम="10">
<अवधिपहचान="डब्ल्यू-गिनती-लेबल">25अवधि>
डिव>
डिव>
<डिवकक्षा="नियंत्रण">
<लेबलके लिए="पी-गणना">अनुच्छेद गिनतीलेबल>
<डिव>
<इनपुटप्रकार="श्रेणी"पहचान="पी-गणना"मिन="1"अधिकतम="20"कदम="1"कीमत="3">
<अवधिपहचान="पी-गिनती-लेबल">3अवधि>
डिव>
डिव>
<बटनप्रकार="जमा करना">बनानाबटन>
प्रपत्र>
<बटनकक्षा="कॉपी">क्लिपबोर्ड पर कॉपी करेंबटन>
<डिवकक्षा="जानकारी">
 पैरामीटर सेट करने के लिए स्लाइडर्स का उपयोग करें, फिर "जेनरेट" बटन दबाएं।

 आप "क्लिपबोर्ड पर कॉपी करें" बटन दबाकर टेक्स्ट को कॉपी कर सकते हैं
डिव>
डिव>
<डिवकक्षा="आउटपुट">डिव>
डिव>
<लिखी हुई कहानीप्रकार="मापांक"स्रोत="/main.js">लिखी हुई कहानी>
शरीर>
एचटीएमएल>

यह मार्कअप बस यूजर इंटरफ़ेस को परिभाषित करता है। स्क्रीन का बायाँ भाग नियंत्रण प्रदर्शित करता है, जबकि दायाँ भाग आउटपुट दिखाता है। अगला, खोलें मुख्य.जे.एस फ़ाइल, इसकी सामग्री साफ़ करें, और आयात करने के लिए एक पंक्ति जोड़ें स्टाइल.सीएसएस:

आयात'./style.css'

लोरेम फ़ाइल आयात करना और वैश्विक चर परिभाषित करना

इस प्रोजेक्ट की GitHub रिपॉजिटरी खोलें, इसकी सामग्री की प्रतिलिपि बनाएँ लोरेम.जे.एस फ़ाइल करें, और उन्हें अपनी स्थानीय प्रतिलिपि में चिपकाएँ लोरेम.जे.एस. लोरेम.जे.एस बस लोरेम इप्सम टेक्स्ट की एक बहुत लंबी स्ट्रिंग निर्यात करता है जिसे अन्य जावास्क्रिप्ट फ़ाइलें उपयोग कर सकती हैं।

में मुख्य.जे.एस फ़ाइल, आयात करें लोरेम से स्ट्रिंग लोरेम.जे.एस फ़ाइल करें और आवश्यक चर परिभाषित करें:

आयात { लोरेम } से'./लोरेम';
होने देना टेक्स्ट = लोरेम.रिप्लेस(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "")।विभाजित करना(' ');
होने देना अंतिमचर;
होने देना वर्डकाउंटकंट्रोल = दस्तावेज़.क्वेरी चयनकर्ता("#w-गिनती");
होने देना पैराग्राफकाउंटकंट्रोल = दस्तावेज़.क्वेरी चयनकर्ता("#पी-गणना");
होने देना वर्डकाउंटलेबल = दस्तावेज़.क्वेरी चयनकर्ता("#w-गिनती-लेबल");
होने देना पैराग्राफकाउंटलेबल = दस्तावेज़.क्वेरी चयनकर्ता("#पी-गिनती-लेबल");
होने देना वर्डकाउंट = वर्डकाउंटकंट्रोल.वैल्यू;
होने देना पैराग्राफकाउंट = पैराग्राफकाउंटकंट्रोल.वैल्यू;
होने देना प्रतिलिपि= दस्तावेज़.क्वेरी चयनकर्ता(".कॉपी");

इस कोड का उपयोग करता है एक नियमित अभिव्यक्ति में किसी भी विराम चिह्न को हटाने के लिए लोरेम मूलपाठ। मूलपाठ वेरिएबल के इस संशोधित संस्करण को बांधता है लोरेम मूलपाठ। इससे शब्द और पैराग्राफ बनाना आसान हो जाएगा।

जेनरेटर फ़ंक्शंस बनाना

किसी भी बेतरतीब ढंग से उत्पन्न वाक्य या पैराग्राफ को "वास्तविक" दिखाने के लिए विराम चिह्न की आवश्यकता होती है। वैश्विक चर को परिभाषित करने के बाद, नामक एक फ़ंक्शन बनाएं generateRandomPunctuation() और उस फ़ंक्शन में एक ऐरे बनाएं जिसे कहा जाता है पात्र और इसे आबाद करो।

समारोहयादृच्छिकविराम चिह्न उत्पन्न करें() {
होने देना अक्षर = [",", "!", ".", "?"];
होने देना चरित्र = अक्षर[गणित।ज़मीन(गणित.random() * अक्षर.लंबाई)];
 लास्टचार = चरित्र;
वापस करना चरित्र;
}

उपरोक्त कोड ब्लॉक एक सरणी को परिभाषित करता है, पात्र, जिसमें अलग-अलग विराम चिह्न हैं। यह दूसरे वेरिएबल को परिभाषित करता है, चरित्र, जिसे यह से एक यादृच्छिक तत्व पर सेट करता है पात्र सरणी. वैश्विक चर, अंतिमचर, वही मान संग्रहीत करता है जो फ़ंक्शन फिर लौटाता है।

इसके बाद, एक बनाएं जेनरेटपैराग्राफ() ए के साथ कार्य करें गिनती करना पैरामीटर जिसका डिफ़ॉल्ट मान 100 है।

समारोहजेनरेटपैराग्राफ(गिनती = 100) {
}

इस फ़ंक्शन में, घोषित करें a अनुच्छेद सरणी बनाएं और वैश्विक से यादृच्छिक शब्द लाएं मूलपाठ सरणी, फिर इसे अंदर धकेलें अनुच्छेद.

होने देना अनुच्छेद = [];
के लिए (होने देना मैं = 1; मैं <= गिनती; मैं++) {
 पैराग्राफ़.पुश (टेक्स्ट[गणित।ज़मीन(गणित.random() * text.length)].toLowerCase());
}

इसके बाद, प्रत्येक पैराग्राफ के पहले शब्द में पहले अक्षर को बड़े अक्षरों में लिखने के लिए कोड जोड़ें:

होने देना fl=पैराग्राफ[0];
अनुच्छेद[0] = fl.replace (fl[0], फ़्लो[0].toUpperCase());

प्रत्येक पैराग्राफ एक विराम चिह्न (आमतौर पर पूर्ण विराम) के साथ समाप्त होता है, इसलिए वह कोड जोड़ें जो प्रत्येक पैराग्राफ के अंत में एक अवधि जोड़ता है।

होने देना lwPos = पैराग्राफ.लंबाई - 1;
होने देना lशब्द = अनुच्छेद[lwPos];
पैराग्राफ[lwPos] = lWord.replace (lWord, lWord + ".");

इसके बाद, इसमें एक यादृच्छिक तत्व में यादृच्छिक रूप से उत्पन्न विराम चिह्न जोड़ने की कार्यक्षमता लागू करें अनुच्छेद सरणी.

पैराग्राफ.प्रत्येक के लिए((शब्द, सूचकांक) => {
अगर (सूचकांक > 0 && अनुक्रमणिका % 100) {
होने देना यादृच्छिक संख्या = गणित।ज़मीन(गणित।अनियमित() * 4);
होने देना पॉज़ = इंडेक्स + रैंडम नंबर;
होने देना रैंडवर्ड = पैराग्राफ़[पॉज़];
 अनुच्छेद[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
होने देना nWord=पैराग्राफ[pos+ 1];
अगर (अंतिम वर्ण !== ",") {
 अनुच्छेद[स्थिति + 1] = nWord.replace (nWord[0], एनवर्ड[0].toUpperCase());
 }
 }
})

यह कोड ब्लॉक एक यादृच्छिक विराम चिह्न उत्पन्न करता है और इसे यादृच्छिक तत्व के अंत में जोड़ता है अनुच्छेद सरणी. विराम चिह्न जोड़ने के बाद, यदि विराम चिह्न अल्पविराम नहीं है तो यह अगले तत्व के पहले अक्षर को बड़ा कर देता है।

अंत में, वापस लौटें अनुच्छेद सरणी को एक स्ट्रिंग के रूप में स्वरूपित किया गया:

वापस करना अनुच्छेद.जुड़ें(" ");

लोरेम इप्सम पाठ में उपयोगकर्ता द्वारा निर्दिष्ट अनुच्छेदों की संख्या के आधार पर एक 'संरचना' होनी चाहिए। आप इस 'संरचना' को परिभाषित करने के लिए एक सरणी का उपयोग कर सकते हैं। उदाहरण के लिए, यदि उपयोगकर्ता तीन पैराग्राफ वाला लोरेम इप्सम टेक्स्ट चाहता है, तो 'संरचना' सरणी इस तरह दिखनी चाहिए:

संरचना = ["पहला पैराग्राफ।", "\n\n", "दूसरा अनुच्छेद।", "\n\n", "तीसरा पैराग्राफ"]

उपरोक्त कोड ब्लॉक में, प्रत्येक "\n \n" प्रत्येक पैराग्राफ के बीच की दूरी को दर्शाता है। यदि आप लॉग इन करते हैं संरचना.जुड़ें("") ब्राउज़र कंसोल में, आपको निम्नलिखित देखना चाहिए:

एक फ़ंक्शन बनाएं जो स्वचालित रूप से इस संरचना को उत्पन्न करता है और कॉल करता है जेनरेटपैराग्राफ समारोह:

समारोहgenerateStructure(शब्दगणना, अनुच्छेद = 1) {
होने देना संरचना = [];
के लिए (होने देना मैं = 0; मैं < पैराग्राफ * 2; मैं++) {
अगर (मैं % 20) संरचना[i] = जेनरेटपैराग्राफ (वर्डकाउंट);
अन्यअगर (i < (पैराग्राफ * 2) - 1) संरचना[i] = "\n\n";
 }
वापस करना संरचना.जुड़ें("");
}

इवेंट श्रोताओं को नियंत्रणों में जोड़ना

इसमें एक "इनपुट" ईवेंट श्रोता जोड़ें शब्दगणनानियंत्रण इनपुट तत्व और कॉलबैक फ़ंक्शन में, सेट करें शब्द गणना इनपुट मान के लिए. फिर लेबल को अपडेट करें.

WordCountControl.addEventListener("इनपुट", (ई) => {
 शब्दगणना = e.target.value;
 WordCountLabel.textContent= e.target.value;
})

इसके बाद, इसमें एक "इनपुट" ईवेंट श्रोता जोड़ें पैराग्राफकाउंटकंट्रोल इनपुट तत्व और कॉलबैक फ़ंक्शन में सेट करें पैराग्राफ गिनती इनपुट मान पर जाएं और लेबल को अपडेट करें।

पैराग्राफकाउंटकंट्रोल.एडइवेंटलिस्टनर("इनपुट", (ई) => {
 पैराग्राफकाउंट= e.target.value;
 पैराग्राफकाउंटलेबल.टेक्स्टकंटेंट = e.target.value;
})

इसमें एक "क्लिक" इवेंट श्रोता जोड़ें कॉपी बटन जो वापस कॉल करता है पाठ कॉपी करें() जब ईवेंट ट्रिगर होता है.

Copy.addEventListener("क्लिक करें", ()=>copyText());

अंत में, इसमें एक "सबमिट" ईवेंट श्रोता जोड़ें प्रपत्र HTML तत्व और कॉल करें अद्यतनयूआई कॉलबैक फ़ंक्शन में कार्य करें।

दस्तावेज़.क्वेरी चयनकर्ता("प्रपत्र".addEventListener('जमा करना', (ई) => {
 e.preventDefault();
 अपडेटयूआई();
})

यूआई को पूरा करना और अपडेट करना

एक फ़ंक्शन बनाएं getControlValues वह लौट आता है शब्द गणना और पैराग्राफ गिनती एक वस्तु के रूप में.

समारोहgetControlValues() {
वापस करना {शब्दगणना, अनुच्छेदगणना };
}

फिर बनाएं अपडेटयूआई() वह फ़ंक्शन जो उपयोगकर्ता के लिए स्क्रीन पर उत्पन्न टेक्स्ट प्रस्तुत करता है:

समारोहअद्यतनयूआई() {
होने देना आउटपुट = जेनरेटस्ट्रक्चर (getControlValues().wordCount, getControlValues().paragraphCount)
दस्तावेज़.क्वेरी चयनकर्ता(".आउटपुट".innerText = आउटपुट;
}

लगभग हो गया। बनाएं पाठ कॉपी करें() जब भी उपयोगकर्ता "क्लिपबोर्ड पर कॉपी करें" बटन पर क्लिक करता है तो फ़ंक्शन क्लिपबोर्ड पर टेक्स्ट लिखता है।

asyncसमारोहपाठ कॉपी करें() {
होने देना पाठ = दस्तावेज़.क्वेरी चयनकर्ता(".आउटपुट".innerText;
कोशिश {
इंतजार नेविगेटर.क्लिपबोर्ड.राइटटेक्स्ट (पाठ);
 चेतावनी('क्लिपबोर्ड पर नकल');
 } पकड़ना (त्रुटि) {
 चेतावनी('कॉपी करने में विफल:', गलती);
 }
 }

फिर कॉल करें अपडेटयूआई() समारोह:

अपडेटयूआई();

बधाई हो! आपने जावास्क्रिप्ट और वाइट के साथ एक लोरेम इप्सम टेक्स्ट जनरेटर बनाया है।

वाइट के साथ अपने जावास्क्रिप्ट विकास को सुपरचार्ज करें

वाइट एक लोकप्रिय फ्रंटएंड टूल है जो आपके फ्रंटएंड फ्रेमवर्क को सेट करना आसान बनाता है। यह रिएक्ट, स्वेल्ट, सॉलिडजेएस और यहां तक ​​कि सादे वेनिला जावास्क्रिप्ट जैसे विभिन्न ढांचे का समर्थन करता है। कई जावास्क्रिप्ट डेवलपर Vite का उपयोग करते हैं क्योंकि इसे स्थापित करना बहुत आसान है और बहुत तेज़ है।