🚪 🧒🏻 🕺🏽 शाम के लिए पाठ: वाक्य रचना हाइलाइटिंग 🈳 🛡️ 🏜️

हाल ही में मुझे दिलचस्पी हुई कि कोड हाइलाइटिंग को अंदर से कैसे व्यवस्थित किया जाए। पहले ऐसा लगता था कि वहाँ सब कुछ बेतहाशा जटिल था - एक वाक्यविन्यास वृक्ष, पुनरावृत्ति, और वह सब कुछ था। हालांकि, करीब निरीक्षण पर, यह पता चला कि यहां कुछ भी मुश्किल नहीं है। सभी काम एक चक्र में पीछे और पीछे के साथ किया जा सकता है, इसके अलावा, नियमित अभिव्यक्तियाँ लगभग कभी भी परिणामी स्क्रिप्ट में उपयोग नहीं की जाती हैं।

डेमो पेज: जावास्क्रिप्ट कोड हाइलाइटर

मुख्य विचार

हम राज्य के वैरिएबल की घोषणा करते हैं, जो इस बारे में जानकारी संग्रहीत करेगा कि हम किस कोड में हैं। यदि, उदाहरण के लिए, राज्य एक के बराबर है, तो इसका मतलब है कि हम एकल उद्धरण के साथ एक स्ट्रिंग के अंदर हैं। स्क्रिप्ट समापन उद्धरण की प्रतीक्षा करेगी और बाकी सब को अनदेखा करेगी। टिप्पणियों, regexp और अन्य तत्वों को उजागर करने के साथ एक ही बात, प्रत्येक का अपना राज्य मूल्य है। इस प्रकार, विभिन्न उद्घाटन और समापन वर्ण संघर्ष नहीं करेंगे; दूसरे शब्दों में, इस तरह एक कोड:

let a = '"\'"';

सही ढंग से प्रकाश डाला जाएगा, अर्थात्, ऐसे मामलों ने सबसे अधिक कठिनाइयों का कारण बना।

शुरुआत हो रही है

हम राज्य चर के संभावित मूल्यों को निर्धारित करते हैं, साथ ही रंग जिसमें कोड के इस या उस हिस्से को रंगीन किया जाएगा, साथ ही जावास्क्रिप्ट कीवर्ड की सूची (जिसे भी हाइलाइट किया जाएगा):

कॉन्स्ट स्टेट्स = {...

 const states = { NONE : 0, SINGLE_QUOTE : 1, // 'string' DOUBLE_QUOTE : 2, // "string" ML_QUOTE : 3, // `string` REGEX_LITERAL : 4, // /regex/ SL_COMMENT : 5, // // single line comment ML_COMMENT : 6, // /* multiline comment */ NUMBER_LITERAL : 7, // 123 KEYWORD : 8 // function, var etc. }; const colors = { NONE : '#000', SINGLE_QUOTE : '#aaa', // 'string' DOUBLE_QUOTE : '#aaa', // "string" ML_QUOTE : '#aaa', // `string` REGEX_LITERAL : '#707', // /regex/ SL_COMMENT : '#0a0', // // single line comment ML_COMMENT : '#0a0', // /* multiline comment */ NUMBER_LITERAL : '#a00', // 123 KEYWORD : '#00a', // function, var etc. OPERATOR : '#07f' // null, true etc. }; const keywords = 'async|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|of|package|private|protected|public|return|set|static|super|switch|throw|try|typeof|var|void|while|with|yield|catch|finally'.split('|');

अगला, हम एक फ़ंक्शन बनाते हैं जो कोड के साथ एक लाइन लेगा और हाइलाइट किए गए कोड के साथ समाप्त HTML लौटाएगा। हाइलाइटिंग के लिए वर्णों को वर्ण चर में निर्दिष्ट रंग के साथ SPAN में लपेटा जाएगा।

फ़ंक्शन में केवल एक चक्र होगा, जो प्रत्येक वर्ण का विश्लेषण करता है और आवश्यक होने पर खुलने / बंद होने वाले एसपीएएन को जोड़ता है।

 function highlight(code) { let output = ''; let state = states.NONE; for (let i = 0; i < code.length; i++) { let char = code[i], prev = code[i-1], next = code[i+1]; //     } return output; }

सबसे पहले, टिप्पणियों को हाइलाइट करें: सिंगल-लाइन और मल्टी-लाइन। यदि वर्तमान और अगला वर्ण स्लैश है, और वे पंक्ति के अंदर नहीं हैं ( स्थिति 0 है, अर्थात , स्टेट्स। कोई भी नहीं ), तो यह टिप्पणी की शुरुआत है। राज्य बदलें और वांछित रंग के साथ स्पैन खोलें:

 if (state == states.NONE && char == '/' && next == '/') { state = states.SL_COMMENT; output += '<span style="color: ' + colors.SL_COMMENT + '">' + char; continue; }

जारी रखने की आवश्यकता है ताकि निम्नलिखित जांच काम न करें और संघर्ष न हो।

अगला, हम पंक्ति के अंत की प्रतीक्षा करते हैं: यदि वर्तमान वर्ण एक पंक्ति विराम है और राज्य में एकल-पंक्ति टिप्पणी है, तो SPAN को बंद करें और राज्य को शून्य में बदलें:

 if (state == states.SL_COMMENT && char == '\n') { state = states.NONE; output += char + '</span>'; continue; }

इसी तरह, हम मल्टी-लाइन टिप्पणियों की तलाश कर रहे हैं, एल्गोरिथ्म बिल्कुल वैसा ही है, केवल आपके द्वारा देखे जा रहे वर्ण अलग हैं:

 if (state == states.NONE && char == '/' && next == '*') { state = states.ML_COMMENT; output += '<span style="color: ' + colors.ML_COMMENT + '">' + char; continue; } if (state == states.ML_COMMENT && char == '/' && prev == '*') { state = states.NONE; output += char + '</span>'; continue; }

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

 if (state == states.NONE && char == '\'') { state = states.SINGLE_QUOTE; output += '<span style="color: ' + colors.SINGLE_QUOTE + '">' + char; continue; } if (state == states.SINGLE_QUOTE && char == '\'' && prev != '\\') { state = states.NONE; output += char + '</span>'; continue; }

कोड वही है जो पहले से ही ऊपर था, केवल अब हम पंक्ति के अंत को पंजीकृत नहीं करते हैं यदि उद्धरण से पहले बैकस्लैश था।

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

अगर (राज्य == स्टेट्स। कोई और& चार == '' '') {...

 if (state == states.NONE && char == '"') { state = states.DOUBLE_QUOTE; output += '<span style="color: ' + colors.DOUBLE_QUOTE + '">' + char; continue; } if (state == states.DOUBLE_QUOTE && char == '"' && prev != '\\') { state = states.NONE; output += char + '</span>'; continue; } if (state == states.NONE && char == '`') { state = states.ML_QUOTE; output += '<span style="color: ' + colors.ML_QUOTE + '">' + char; continue; } if (state == states.ML_QUOTE && char == '`' && prev != '\\') { state = states.NONE; output += char + '</span>'; continue; }

Regexp शाब्दिक, जो आसानी से विभाजन के संकेत के साथ भ्रमित हैं, एक अलग विचार के लायक हैं। हम लेख के अंत में इस समस्या पर लौट आएंगे, लेकिन अब हम स्ट्रिंग्स के साथ regexps के साथ भी ऐसा ही कर रहे हैं।

 if (state == states.NONE && char == '/') { state = states.REGEX_LITERAL; output += '<span style="color: ' + colors.REGEX_LITERAL + '">' + char; continue; } if (state == states.REGEX_LITERAL && char == '/' && prev != '\\') { state = states.NONE; output += char + '</span>'; continue; }

यह सरल मामलों को समाप्त करता है जब एक शाब्दिक की शुरुआत और अंत 1-2 पात्रों द्वारा निर्धारित किया जा सकता है। आइए संख्याओं को उजागर करना शुरू करें: जैसा कि आप जानते हैं, वे हमेशा एक संख्या से शुरू करते हैं, लेकिन रचना में अक्षर हो सकते हैं ( 0xFF , 123n )।

 if (state == states.NONE && /[0-9]/.test(char) && !/[0-9a-z$_]/i.test(prev)) { state = states.NUMBER_LITERAL; output += '<span style="color: ' + colors.NUMBER_LITERAL + '">' + char; continue; } if (state == states.NUMBER_LITERAL && !/[0-9a-fnx]/i.test(char)) { state = states.NONE; output += '</span>' }

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

सभी संभावित प्रकार के शाब्दिक शब्दों पर प्रकाश डाला गया है, कीवर्ड की खोज बनी हुई है। ऐसा करने के लिए, आपको एक नेस्टेड लूप की आवश्यकता होती है जो आगे दिखता है और यह निर्धारित करता है कि वर्तमान चरित्र कीवर्ड की शुरुआत है या नहीं।

 if (state == states.NONE && !/[a-z0-9$_]/i.test(prev)) { let word = '', j = 0; while (code[i + j] && /[az]/i.test(code[i + j])) { word += code[i + j]; j++; } if (keywords.includes(word)) { state = states.KEYWORD; output += '<span style="color: ' + colors.KEYWORD + '">'; } }

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

 if (state == states.KEYWORD && !/[az]/i.test(char)) { state = states.NONE; output += '</span>'; }

सबसे सरल बात बनी हुई है - ऑपरेटरों का मुख्य आकर्षण, यहां आप केवल उन पात्रों के सेट की तुलना कर सकते हैं जो ऑपरेटरों में हो सकते हैं:

 if (state == states.NONE && '+-/*=&|%!<>?:'.indexOf(char) != -1) { output += '<span style="color: ' + colors.OPERATOR + '">' + char + '</span>'; continue; }

लूप के अंत में, यदि जारी रहने वाली स्थितियों में से कोई भी कारण ट्रिगर नहीं होता है, तो हम वर्तमान वर्ण को परिणामी चर में जोड़ते हैं। जब शाब्दिक या कीवर्ड की शुरुआत या अंत होता है, तो हम रंग के साथ स्पैन को खोलते / बंद करते हैं; अन्य सभी मामलों में - उदाहरण के लिए, जब लाइन पहले से ही खुली होती है, तो हम एक बार में केवल एक वर्ण फेंकते हैं। यह उद्घाटन कोण कोष्ठक को परिरक्षण के लायक भी है, अन्यथा वे लेआउट को तोड़ सकते हैं।

 output += char.replace('<', '&' + 'lt;'); //  +      <

बग ठीक करना

सब कुछ किसी भी तरह से बहुत सरल लग रहा था, और व्यर्थ नहीं: अधिक गहन परीक्षण के साथ, ऐसे मामले थे जहां बैकलाइट सही तरीके से काम नहीं करता था।

विभाजन को रेगेक्सपी के रूप में मान्यता प्राप्त है, एक को दूसरे से अलग करने के लिए, रेक्सएक्सप को निर्धारित करने के तरीके को बदलना आवश्यक होगा। हम चर को isegex = true घोषित करते हैं, जिसके बाद हम "साबित" करने की कोशिश करेंगे कि यह regexp नहीं है, बल्कि एक विभाजन चिन्ह है। डिवीजन ऑपरेशन से पहले कोई कीवर्ड या ब्रैकेट नहीं हो सकते हैं - इसलिए, हम एक नेस्टेड लूप बनाते हैं और देखते हैं कि स्लैश का सामना क्या होता है।

जैसा कि पहले था

 if (state == states.NONE && char == '/') { state = states.REGEX_LITERAL; output += '<span style="color: ' + colors.REGEX_LITERAL + '">' + char; continue; }

 if (state == states.NONE && char == '/') { let word = '', j = 0, isRegex = true; while (i + j >= 0) { j--; //        if ('+/-*=|&<>%,({[?:;'.indexOf(code[i+j]) != -1) break; //   ;   -   if (!/[0-9a-z$_]/i.test(code[i+j]) && word.length > 0) break; //  ,     if (/[0-9a-z$_]/i.test(code[i+j])) word = code[i+j] + word; //   - ,     if (')]}'.indexOf(code[i+j]) != -1) { isRegex = false; break; } } //      -    //  : return /test/g - , plainWord /test/g -  if (word.length > 0 && !keywords.includes(word)) isRegex = false; if (isRegex) { state = states.REGEX_LITERAL; output += '<span style="color: ' + colors.REGEX_LITERAL + '">' + char; continue; } }

यद्यपि यह दृष्टिकोण समस्या को हल करता है, फिर भी यह दोषों के बिना नहीं है। आप इसे समायोजित कर सकते हैं ताकि यह एल्गोरिथ्म भी गलत तरीके से हाइलाइट हो, उदाहरण के लिए: यदि (ए) / रेगेक्स / या तो: 1 / / रेगेक्स / / 2 । एक व्यक्ति जो संख्या को regexp में विभाजित करता है उसे हाइलाइटिंग कोड की आवश्यकता क्यों होती है - यह एक और सवाल है; डिजाइन वाक्यात्मक रूप से सही है, हालांकि यह वास्तविक जीवन में नहीं होता है।

कई कार्यों में रेगेक्सप कलरिंग की समस्याएँ हैं , उदाहरण के लिए प्रिज्म.जेएस में । जाहिर है, regexps के सही हाइलाइटिंग के लिए, आपको सिंटैक्स को पूरी तरह से समझना होगा, जैसा कि ब्राउज़र करते हैं।

दूसरा बग जो मुझे निपटना था वह बैकस्लैश से संबंधित था। एक बंद उद्धरण चिह्न को 'test \\' रूप में स्ट्रिंग में पहचाना नहीं गया था, क्योंकि इसके सामने एक बैकस्लैश की उपस्थिति थी। उस स्थिति पर वापस जाएं जो पंक्ति के अंत को पकड़ती है:

 if (state == states.SINGLE_QUOTE && char == '\'' && prev != '\\')

स्थिति के अंतिम भाग को बदलने की आवश्यकता है: यदि बैकस्लैश बच गया है (अर्थात, इससे पहले एक और बैकस्लैश है), तो लाइन के अंत को पंजीकृत करें।

 const closingCharNotEscaped = prev != '\\' || prev == '\\' && code[i-2] == '\\'; // ... if (state == states.SINGLE_QUOTE && char == '\'' && closingCharNotEscaped)

एक ही प्रतिस्थापन डबल और रिवर्स उद्धरण के साथ तार के लिए खोज में बनाया जाना चाहिए, साथ ही regexp की खोज में।

यह सब है, आप लेख की शुरुआत में लिंक द्वारा हाइलाइट का परीक्षण कर सकते हैं।

शाम के लिए पाठ: वाक्य रचना हाइलाइटिंग

मुख्य विचार

शुरुआत हो रही है

बग ठीक करना

More articles: