jQuery or Javascript: Find HTML text by character offset and length -

मेरे पास कुछ जेसन है: {"div_id": "pie1", "str_offset": "5", " Str_length ":" 6 "}

और मेरे पास निम्न HTML है:

  & lt; div id =" pie1 "& gt; मुझे पाई पसंद है! & Lt ; / div & gt;   
 मैं मिलान पाठ के आसपास एक  & lt; span & gt;  तत्व को लपेट कर पा रहा हूं, यानी, 6 पाठ वर्णों की शुरुआत पाठ नोड तो इस उदाहरण में यह "ई पाइ!" रैप करेगा आदर्श रूप में, समाधान किसी भी अन्य टैग की उपस्थिति को अनदेखा कर देगा, जैसे  मुझे & lt; b & gt; pie! & Lt; / b & gt;  और केवल पाठ वर्णों की गणना करते हैं।  
 यदि एक jQuery जैसे चयनकर्ता संभव नहीं है, यह सिर्फ str_offset की स्थिति को ठीक करना, एचटीएमएल लिखने के लिए ठीक है, फिर अंत की स्थिति ढूंढने और टैग को बंद करना होगा।  
 `  
 
 
 सरल उदाहरण के साथ शुरू करना जहां हम मानते हैं कि div में कोई भी बाल तत्व नहीं है, आप ऐसा कुछ कर सकते हैं:  
  फ़ंक्शन रैप टेक्स्ट (आईडी, ऑफसेट, लम्बाई) {$ ("#" + आईडी)। HTML (फ़ंक्शन (i, पुराना HTML) {पुराना HTML substr (0, ऑफ़सेट) + "& lt; span & gt ; "+ पुराना एचटीएमएल। एस यूस्ट्रित (ऑफसेट, लम्बाई) +" & lt; / span & gt; "+ पुराना HTML substr (ऑफसेट + लंबाई);}); } रैप टेक्स्ट ("पाई 1", 5,6); // स्पष्ट रूप से अपने JSON से मानों का उपयोग करें यहां   
 डेमो:  
 जब आप कॉलबैक फ़ंक्शन के साथ jQuery का कॉल करते हैं तो jQuery आपके फ़ंक्शन को वर्तमान HTML पाठ के साथ कहता है और आप नया मान।  
 निम्न जटिल कोड "काम करता है" यदि div के भीतर बच्चे तत्व होते हैं, लेकिन यह संभवतः टैग अतिव्यापी बनाता है, जब इसे स्पैन टैग सम्मिलित करता है:  
  फ़ंक्शन रैप टेक्स्ट (आईडी, ऑफसेट, लम्बाई) {$ ("#" + आईडी)। Html (फ़ंक्शन (i, पुराना HTML) {var i, c, spanstart, spanStop; के लिए (i = 0, c = 0; i & lt; OldHtml.length; i ++) {यदि (सी === ऑफसेट) spanStart = i; और यदि (सी === ऑफसेट + लंबाई) {spanStop = i; break;} यदि (oldHtml.charAt (i) === " & Lt; ") {जबकि (++ i & lt; oldHtml.length & amp; oldHtml.charAt (i)! =" & Gt; "& amp; amp; पुराना HTML.charAt (i + 1)! =" & Lt; ") ;} C ++;} यदि (spanStart === अपरिभाषित) पुराना HTML लौटाता है; यदि (spanStop === अपरिभाषित) spanStop = पुराना HTML.length; पुराना HTML पुराना HTML (0, स्पैन स्टार्ट) + "& lt; span & gt;" + पुराना HTML टुकड़ा (स्पैन स्टार्ट, स्पेन्सस्टॉप) + "& lt; / span & Gt; "+ पुराना HTML sslice (spanStop); }); }   
 आप इस डेमो में देख सकते हैं: उपर्युक्त द्वारा निर्मित HTML "सही" स्थानों में स्पैन टैग्स हैं, लेकिन जब ब्राउज़र वास्तव में प्रदर्शित करता है तो उसे इसे पसंद नहीं है ( ओवरलैप के कारण कम से कम फ़ायरफ़ॉक्स नहीं)।