जावास्क्रिप्ट: टेक्स्ट नोड

Question

में तत्व जोड़ें मैं टेक्स्ट टेक्स्ट में कोई तत्व जोड़ना चाहता हूं। उदाहरण के लिए: मेरे पास एक ऐसा फ़ंक्शन है जो तत्व के टेक्स्ट नोड के भीतर एक स्ट्रिंग की खोज करता है। जब मुझे लगता है, मैं एक HTML तत्व के साथ प्रतिस्थापित करना चाहता हूँ। क्या इसके लिए कुछ मानक है? धन्यवाद।

Answer 1

आप केवल स्ट्रिंग को प्रतिस्थापित नहीं कर सकते हैं, आपको DOM में TextNode elements can't contain child elements के बाद से पूरे टेक्स्ट नोड तत्व को प्रतिस्थापित करना होगा।

इसलिए, जब आप अपने पाठ नोड मिल जाए, अपने प्रतिस्थापन तत्व उत्पन्न करते हैं, तो एक समारोह के लिए इसी तरह के साथ पाठ नोड बदल देते हैं: यह क्या लगता है कि आप क्या करना चाहते हैं के लिए

function ReplaceNode(textNode, eNode) { 
    var pNode = textNode.parentNode; 
    pNode.replaceChild(textNode, eNode); 
} 

, आप को तोड़ने के लिए होगा वर्तमान पाठ नोड को दो नए टेक्स्ट नोड्स और एक नया HTML तत्व में अलग करें। यहाँ आप सही दिशा में उम्मीद है कि बात करने के लिए कुछ नमूना कोड:

function DecorateText(str) { 
    var e = document.createElement("span"); 
    e.style.color = "#ff0000"; 
    e.appendChild(document.createTextNode(str)); 
    return e; 
} 

function SearchAndReplaceElement(elem) { 
    for(var i = elem.childNodes.length; i--;) { 
     var childNode = elem.childNodes[i]; 
     if(childNode.nodeType == 3) { // 3 => a Text Node 
      var strSrc = childNode.nodeValue; // for Text Nodes, the nodeValue property contains the text 
      var strSearch = "Special String"; 
      var pos = strSrc.indexOf(strSearch); 

      if(pos >= 0) { 
       var fragment = document.createDocumentFragment(); 

       if(pos > 0) 
        fragment.appendChild(document.createTextNode(strSrc.substr(0, pos))); 

       fragment.appendChild(DecorateText(strSearch)); 

       if((pos + strSearch.length + 1) < strSrc.length) 
        fragment.appendChild(document.createTextNode(strSrc.substr(pos + strSearch.length + 1))); 

       elem.replaceChild(fragment, childNode); 
      } 
     } 
    } 
} 

शायद jQuery इस आसान बना दिया होता, लेकिन यह समझना महत्वपूर्ण है क्यों इस सामान के सभी तरह से यह करता है काम करता है अच्छा है।