2017-11-15 28 views
11

मैंने उपयोगकर्ताओं को एक घटक में टेक्स्ट चुनने की अनुमति देने के लिए एक Google क्रोम एक्सटेंशन बनाया है। यह ज्यादातर साइटों के लिए बहुत अच्छा काम करता है। हालांकि, फेसबुक अपने स्टेटस अपडेट को अलग-अलग संभालता है। ऐसा लगता है कि भले ही आप एक टेक्स्ट बॉक्स में जो भर रहे हैं, वह वास्तव में div > div > span > span इस टेक्स्ट बॉक्स में प्रत्येक पंक्ति के लिए निर्माण कर रहा है। मुझे नहीं पता कि उन्होंने ऐसा करने का फैसला क्यों किया लेकिन यह टेक्स्ट की कई पंक्तियों को और अधिक जटिल बना देता है।फेसबुक स्थिति अपडेट में एक से अधिक पंक्तियों में फैले वर्णों को प्रतिस्थापित करने के लिए क्रोम एक्सटेंशन का उपयोग करना

क्या फेसबुक स्थिति अपडेट में टेक्स्ट के एकाधिक लाइनों (या कई लाइनों के संगत भाग) का चयन करने और डेटा को प्रतिस्थापित करने का कोई तरीका है?

मेरी कोड के संबंधित भाग इस तरह दिखता है:

function replace_text(language){ 
    let selection = window.getSelection(); 
    string = selection.toString(); 

    /* This section contains code that uses string.replace to replace characters in the string. */ 

    document.execCommand("insertText", false, string); 

} 

तरह से मेरी कोड अब काम करता है, अगर मैं एक पंक्ति मैं कोई समस्या नहीं पर पाठ की जगह के आधार पर। लेकिन, अगर मैं टेक्स्ट को प्रतिस्थापित करता हूं जो कई लाइनों को फैलाता है तो मैं एक रिक्त अनुपयोगी इनपुट बॉक्स के साथ समाप्त होता हूं। निस्संदेह ऐसा इसलिए है क्योंकि यह एचटीएमएल कोड के हिस्सों को हटा रहा है। मैं अपना कोड कैसे ठीक कर सकता हूं ताकि प्रतिस्थापन प्रक्रिया न केवल अन्य साइटों के लिए बल्कि फेसबुक के लिए भी ठीक से काम करे?

+1

यह आसान नहीं लगता है। आप चयनित पाठ के माता-पिता को यह पता लगाने के लिए निर्धारित कर सकते हैं कि आप किस प्रकार के तत्व में हैं। यह सुनिश्चित नहीं है कि चयन तत्वों को फैलाने पर कैसे काम करेगा। आप ऊपर की ओर काम कर सकते हैं और उस तत्व को ढूंढ सकते हैं जहां आंतरिक टेक्स्ट में किसी भी टैग को छीनने के साथ चयन स्ट्रिंग होती है लेकिन फिर प्रतिस्थापन कठिन होगा क्योंकि ऐसा लगता है कि आपको तत्व संरचना को बरकरार रखना होगा। यदि सब कुछ विफल हो जाता है, तो हो सकता है कि आप अपनी प्रतिस्थापन स्ट्रिंग को काम कर सकें और सभी को हटाने और पाठ को पुन: दर्ज करने के लिए कीप्रेस को अनुकरण कर सकें। क्षमा करें, अगर यह विचारों को ट्रिगर करता है तो बस जोर से सोच रहा है। –

उत्तर

0

इस पल के रूप में, सभी स्थिति अद्यतन (और टिप्पणियों) के बीच एक आम विषय है कि उनके ग्रंथों एक एकल के भीतर रहते हैं या true को विशेषता data-text सेट के साथ span तत्वों के सेट कर रहे हैं। आइए उन लक्षित कर सकते हैं:

document.querySelectorAll("span[data-text='true']"); 

मेरे लिए, मैं स्थिति क्षेत्र में 3 लाइनों टाइप किया है और टिप्पणी क्षेत्र डमी पाठ का 1 लाइन। तो जब मैं कंसोल में ऊपर कोड निष्पादित यह उन चार संचयी लाइनों की एक सरणी देता है:

>>> (4) [span, span, span, span] 

कि सरणी के साथ, मैं फैला के माध्यम से पुनरावृति करने के लिए Array.prototype.forEach() विधि का उपयोग करें और innerText की जगह ले सकता:

document.querySelectorAll("span[data-text='true']").forEach(function(element) { 
    element.innerText = element.innerText.replace('Lorem ipsum','Hello world'); 
}); 

हालांकि, पर ध्यान देना महत्वपूर्ण है कि इन परिवर्तनों को HTML में ही बनाया जा रहा है और फेसबुक सीधे अपने HTML को HTML में संग्रहीत नहीं करता है। इसलिए जब आप किसी फ़ील्ड में टेक्स्ट टाइप करते हैं, फ़ोकस करते हैं, फ़ील्ड में टेक्स्ट बदलते हैं, और उस फ़ील्ड को फिर से कॉन्फ़ोक करते हैं, तो यह अवांछनीय घटनाएं उत्पन्न कर सकता है। जब आप फिर से काम करते हैं तो मेरा मानना ​​है कि यह उस पाठ के बारे में जानकारी प्राप्त करता है, जो उस क्षेत्र को फोकस करने से पहले, रिएक्ट्स वर्चुअल डोम जैसे पूर्व स्रोत से। इसे करने से रोकने के लिए, फ़ील्ड (वास्तविक या अनुकरण) पर क्लिक करने के बाद या तो उपयोगकर्ता को MutationObserver (src) का उपयोग करके टाइपिंग करने के बाद परिवर्तन करने की आवश्यकता है।

संबंधित मुद्दे