बाइनरी एडिटर क्या होता है?

बाइनरी एडिटर वह उपकरण है जिसके ज़रिए आप फ़ाइलों को सीधे 16-अधारी या ASCII रूप में संपादित कर सकते हैं। सामान्य टेक्स्ट एडिटर जहाँ “स्ट्रिंग” को संपादन का विषय मानते हैं, वहीं बाइनरी एडिटर फ़ाइल की “कच्ची बाइट श्रेणी” तक पहुँचता है और किसी भी स्थान पर बिट या बाइट को सीधे बदल देता है।

सॉफ़्टवेयर विश्लेषण, डेटा रिकवरी, प्रोटोकॉल जाँच जैसे परिदृश्यों में यह अनिवार्य उपकरण है। GUI अनुप्रयोगों में HxD और Binary Ninja जैसे नाम काफ़ी प्रसिद्ध हैं। लेकिन इस बार मेरा लक्ष्य था कि “सिर्फ़ ब्राउज़र में चलने वाला एकल फ़ाइल बाइनरी एडिटर” बनाया जाए।

कार्यान्वयन की नीति

  • पूरी तरह क्लाइंट-साइड (कोई बाहरी ट्रांसमिशन नहीं)
  • स्थानीय फ़ाइल पढ़ने के लिए FileReader API का उपयोग
  • बाएँ भाग में हेक्स (Hex), दाएँ भाग में ASCII प्रदर्शित
  • क्लिक करते ही संपादन मोड में प्रवेश, मान सीधे बदलने की सुविधा
  • संपादित कोशिकाएँ लाल अक्षरों में हाईलाइट
  • HEX संपादन / ASCII संपादन मोड के बीच स्विच
  • संशोधित परिणाम को फिर से फ़ाइल के रूप में डाउनलोड किया जा सकता है

जिन मुद्दों से जूझना पड़ा और उनके समाधान

1. संपादन बॉर्डर का हिलना

प्रारंभिक क्रियान्वयन में जब किसी सेल को पीले बॉर्डर से दर्शाया जाता था, तो बॉर्डर थोड़ा केंद्र से हटकर दिखाई देता था। यह CSS के line-height और flex विन्यास के प्रभाव के कारण था, जिससे प्रदर्शित अक्षर और बॉर्डर का आधार बिंदु अलग-अलग हो गया था। हमने मोनोस्पेस फ़ॉन्ट मानकर काम किया था, लेकिन ब्राउज़र में रेंडरिंग के दौरान फ़ॉन्ट के अनुसार बेसलाइन बदल सकती है, परिणामस्वरूप दृश्य रूप से ऊपर या नीचे खिसकाव दिखता है।

vertical-align: middle को ज़बरन लागू करके और तत्व को display: inline-block बनाकर ऊँचाई बराबर की गई, जिससे समस्या हल हुई।

.hex-cell.editing {
  outline: 2px solid yellow;
  vertical-align: middle;
}

2. ESC दबाते ही अक्षर दर्ज हो जाना

पहले संस्करण में, यदि संपादन बॉर्डर सक्रिय रहते हुए ESC दबाया जाता, तो सेल में “EE” जैसी स्ट्रिंग दर्ज हो जाती थी।

कारण यह था कि keydown इवेंट को नहीं पकड़ा गया, इसलिए ब्राउज़र ने दबाए गए की का कैरेक्टर कोड सीधे सेल के इनपुट प्रोसेस को भेज दिया। सामान्य इनपुट प्रक्रिया 0–9, A–F तक सीमित थी, मगर Escape को भी की-कोड दिया गया है (पुराने तरीकों में keyCode=27, वर्तमान विनिर्देश में key="Escape")। परिणामस्वरूप यह भी "E" के रूप में व्याख्यायित हो गया।

हल बेहद सरल है—keydown इवेंट पर Escape को स्पष्ट रूप से पकड़ें और उसे संपादन रद्द करने की प्रक्रिया से जोड़ दें।

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    cancelEdit();
    e.preventDefault(); // मूल इनपुट मार्ग को रोकें
  }
});

अब ESC केवल “संपादन रद्द” का काम करता है और सेल में कोई अक्षर नहीं छोड़ता।

3. पुनः लोड करने पर लाल अक्षर बने रहना

जब एक फ़ाइल पढ़कर संपादित की जाती और फिर कोई दूसरी फ़ाइल लोड की जाती, तो पहले वाले लाल हाईलाइट बाकी रह जाते थे।

यह इसलिए हुआ क्योंकि संपादित कोशिकाओं को ट्रैक करने वाली सरणी या स्थिति को नई फ़ाइल पढ़ते समय प्रारंभ नहीं किया गया था। प्रदर्शन क्षेत्र साफ़ करने पर भी अंदरूनी “परिवर्तन फ़्लैग” बचा रह जाता, इसलिए नई फ़ाइल ने भी लाल स्थिति विरासत में ले ली।

समाधान के तौर पर फ़ाइल पढ़ते ही clearModifiedState() को कॉल किया, ताकि परिवर्तन फ़्लैग पूरी तरह रीसेट हो जाए।

4. HEX/ASCII मोड स्विच करना

पहले संस्करण में HEX और ASCII दोनों को एक साथ संपादित करने की अनुमति थी, जिससे “असली मान कौन सा है” यह स्पष्ट नहीं होता था। खासकर जब एक बाइट दो अलग इनपुट फ़ॉर्म से संभाला जाता, तो एक ही सेल में अलग-अलग मार्गों से लिखने की प्रतिस्पर्धा पैदा हो जाती। ASCII इनपुट तुरंत HEX प्रदर्शन को ओवरराइट कर देता, लेकिन इनपुट के दौरान क्षणिक असंगति दिखती थी।

इसे टालने के लिए मोड को स्पष्ट रूप से चुनने वाला चयन बॉक्स बनाया और डिफ़ॉल्ट को HEX संपादन पर सेट किया। अब उपयोगकर्ता स्पष्ट रूप से जानते हैं कि वे HEX दर्ज कर रहे हैं और समकालिक प्रक्रिया भी सरल हो गई है।

कोड की झलक

व्यावहारिक संपादन प्रक्रिया इस प्रकार लागू की गई है।

function applyEdit(offset, newValue) {
  if (mode === "hex") {
    buffer[offset] = parseInt(newValue, 16);
  } else {
    buffer[offset] = newValue.charCodeAt(0);
  }
  markModified(offset);
  render();
}

markModified(offset) लाल हाईलाइट के लिए है। जब भी मान मूल मान से अलग हो, यह संबंधित क्लास जोड़ देता है—काफी सीधी-सरल कार्यान्वयन।

निष्कर्ष

यह ब्राउज़र आधारित बाइनरी एडिटर ऑफ़लाइन भी चलता है और “पूर्णत: क्लाइंट-साइड टूल” होने के कारण सुरक्षा आवश्यकताओं को भी पूरा करता है।

  • जब आपको थोड़े से बाइनरी डेटा में तुरंत बदलाव करना हो
  • ऐसे वातावरण में अनुसंधान करना हो जहाँ समर्पित ऐप इंस्टॉल नहीं किया जा सकता
  • शिक्षण या अध्ययन के दौरान “बाइट अनुक्रम” को सहज तरीके से समझाना हो

इन सभी परिस्थितियों में यह उपकरण उपयोगी सिद्ध होता है।