मैं कैसे 'Lorem Ipsum' <em>बिना</em> jQuery का उपयोग कर के आसपास अंतराल रखना चाहते हैं jQuery

Question

<p>Lorem Ipsum <a href="#">Link</a> <div ... </div> </p> 

का उपयोग किए बिना पाठ का एक खंड के आसपास अंतराल रैप करने के लिए करते हैं, तो परिणाम लगता है:

<p><span>Lorem Ipsum </span><a href="#">Link</a> <div ... </div> </p> 

कोई विचार? धन्यवाद

Answer 1

पहले, आपको अनुच्छेद तक पहुंचने का कोई तरीका चाहिए। के रूप में आवश्यक

<p id="foo">Lorem Ipsum <a href="#">Link</a> <div ... </div> </p> 

उसके बाद, आप document.getElementById का उपयोग करने वाले तत्व का उपयोग कर सकते हैं और उसके बच्चों की जगह:: आप इसे इस तरह के "foo" के रूप में एक id विशेषता, देने के लिए चाहते हो सकता है

var p = document.getElementById('foo'), 
    firstTextNode = p.firstChild, 
    newSpan = document.createElement('span'); 

// Append "Lorem Ipsum" text to new span: 
newSpan.appendChild(document.createTextNode(firstTextNode.nodeValue)); 

// Replace old text node with new span: 
p.replaceChild(newSpan, firstTextNode); 

यह बनाने के लिए अधिक विश्वसनीय, आप पहले बच्चे को एक्सेस करने से पहले p.normalize() पर कॉल करना चाहते हैं, यह सुनिश्चित करने के लिए कि एंकर से पहले सभी टेक्स्ट नोड्स एक के रूप में विलय हो जाएं।

---

Oook, तो तुम एक तत्व के साथ एक पाठ नोड का एक हिस्सा बदलना चाहते हैं। यहाँ कैसे मैं यह कर करेंगे:

function giveMeDOM(html) { 

    var div = document.createElement('div'), 
     frag = document.createDocumentFragment(); 

    div.innerHTML = html; 

    while (div.firstChild) { 
     frag.appendChild(div.firstChild); 
    } 

    return frag; 
} 

var p = document.getElementById('foo'), 
    firstChild = p.firstChild; 

// Merge adjacent text nodes: 
p.normalize(); 

// Get new DOM structure: 
var newStructure = giveMeDOM(firstChild.nodeValue.replace(/Lorem Ipsum/i, '<span>$&</span>')); 

// Replace first child with new DOM structure: 
p.replaceChild(newStructure, firstChild); 

निम्न स्तर पर नोड्स के साथ कार्य करना में होने के लिए एक बुरा स्थिति का एक सा है, विशेष रूप से आपकी मदद करने के लिए किसी भी अमूर्तता के बिना। मैंने "Lorem Ipsum" वाक्यांश से उत्पादित एक HTML स्ट्रिंग से एक डोम नोड बनाकर सामान्यता की भावना बनाए रखने की कोशिश की है। Purists शायद इस समाधान को पसंद नहीं है, लेकिन मुझे यह पूरी तरह से उपयुक्त लगता है।

---

संपादित: अब एक दस्तावेज टुकड़ा का उपयोग कर! धन्यवाद Crescent Fresh!

Answer 2

कम्बाइन इन 2 ट्यूटोरियल:

PPK on JavaScript: The DOM - Part 3

Adding elements to the DOM

मूल रूप से आप, नोड मूल्य का उपयोग इसे हटाने, और एक नया चाइल्ड तत्व जो नोड मूल्य है बनाने की जरूरत का मूल्य है पैरेंट आइटम का नोड, उसके बाद उस तत्व (इस मामले में अवधि) को माता-पिता (इस मामले में अनुच्छेद) में संलग्न करें

Answer 3

जावास्क्रिप्ट में नियमित अभिव्यक्ति का उपयोग करने और "Lorem" को बदलने के बारे में कैसे करें "के साथ" < अवधि > Lorem Ipsum </span > ipsum "(बस याद रखें कि आप प्राप्त करना होगा" तत्व के innerHTML "और फिर बहुत फिर की जगह थोड़ा धीमा हो सकता है)

Answer 4

अद्यतन: नीचे दी गई विधि सबट्री container की अध्यक्षता के माध्यम से खोज और किसी स्पान तत्व में text के सभी उदाहरणों लपेट होगा। शब्द टेक्स्ट नोड के भीतर कहीं भी हो सकते हैं, और पाठ नोड उपट्री में किसी भी स्थिति में हो सकता है।

(ठीक है, तो यह कुछ मामूली tweaks से अधिक लिया।: पी)

function wrapText(container, text) { 
    // Construct a regular expression that matches text at the start or end of a string or surrounded by non-word characters. 
    // Escape any special regex characters in text. 
    var textRE = new RegExp('(^|\\W)' + text.replace(/[\\^$*+.?[\]{}()|]/, '\\$&') + '($|\\W)', 'm'); 
    var nodeText; 
    var nodeStack = []; 

    // Remove empty text nodes and combine adjacent text nodes. 
    container.normalize(); 

    // Iterate through the container's child elements, looking for text nodes. 
    var curNode = container.firstChild; 

    while (curNode != null) { 
    if (curNode.nodeType == Node.TEXT_NODE) { 
     // Get node text in a cross-browser compatible fashion. 
     if (typeof curNode.textContent == 'string') 
     nodeText = curNode.textContent; 
     else 
     nodeText = curNode.innerText; 

     // Use a regular expression to check if this text node contains the target text. 
     var match = textRE.exec(nodeText); 
     if (match != null) { 
     // Create a document fragment to hold the new nodes. 
     var fragment = document.createDocumentFragment(); 

     // Create a new text node for any preceding text. 
     if (match.index > 0) 
      fragment.appendChild(document.createTextNode(match.input.substr(0, match.index))); 

     // Create the wrapper span and add the matched text to it. 
     var spanNode = document.createElement('span'); 
     spanNode.appendChild(document.createTextNode(match[0])); 
     fragment.appendChild(spanNode); 

     // Create a new text node for any following text. 
     if (match.index + match[0].length < match.input.length) 
      fragment.appendChild(document.createTextNode(match.input.substr(match.index + match[0].length))); 

     // Replace the existing text node with the fragment. 
     curNode.parentNode.replaceChild(fragment, curNode); 

     curNode = spanNode; 
     } 
    } else if (curNode.nodeType == Node.ELEMENT_NODE && curNode.firstChild != null) { 
     nodeStack.push(curNode); 
     curNode = curNode.firstChild; 
     // Skip the normal node advancement code. 
     continue; 
    } 

    // If there's no more siblings at this level, pop back up the stack until we find one. 
    while (curNode != null && curNode.nextSibling == null) 
     curNode = nodeStack.pop(); 

    // If curNode is null, that means we've completed our scan of the DOM tree. 
    // If not, we need to advance to the next sibling. 
    if (curNode != null) 
     curNode = curNode.nextSibling; 
    } 
}