जेएस - सामग्री को हटाने के बिना टैग हटाएं

Question

मुझे आश्चर्य है कि टैग को निकालना संभव है लेकिन सामग्री को व्यवहार में छोड़ दें? उदाहरण के लिए, क्या स्पैन टैग को हटाना संभव है लेकिन वहां स्पैन की सामग्री छोड़ दें?

<p>The weather is sure <span>sunny</span> today</p> //original 

<p>The weather is sure sunny today</p> //turn it into this 

मैं replaceWith() का उपयोग करने का this विधि का उपयोग कर की कोशिश की है, लेकिन यह इसे में

<p> 
    "The weather is sure " 
    "sunny" 
    " today" 
</p> 

संपादित एचटीएमएल दिया: अपने जवाब के सभी परीक्षण के बाद, मुझे एहसास हुआ कि मेरी कोड की गलती है । मैं तीन स्प्लिट टेक्स्ट नोड्स प्राप्त करने का कारण स्पैन टैग के सम्मिलन के कारण हूं। मैं अपनी समस्या को ठीक करने का प्रयास करने के लिए एक और सवाल तैयार करूंगा।

Answer 1

jQuery आसान तरीके हैं:

var spans = $('span'); 
spans.contents().unwrap(); 

अलग चयनकर्ता तरीकों के साथ

, यह संभव है गहरा घोंसला वाले स्पैन को हटाने के लिए या केवल एक बच्चे के तत्वों को फैलाएं।

Answer 2

यह केवल एक के बजाय तीन टेक्स्ट नोड्स है। इससे कोई फर्क नहीं पड़ता है?

यह एक समस्या है, तो उन्हें गठबंधन करने के लिए डोम normalize विधि का उपयोग करें:

$(...)[0].normalize(); 

Answer 3

$(function(){ 

    var newLbl=$("p").clone().find("span").remove().end().html(); 
    alert(newLbl); 

});​ 

उदाहरण: http://jsfiddle.net/7gWdM/6/

Answer 4

वहाँ यह करने के लिए कई तरीके हैं। Jquery सबसे आसान तरीका है:

//grab and store inner span html 
var content = $('p span').html; 
//"Re"set inner p html 
$('p').html(content); 

जावास्क्रिप्ट element.replace का उपयोग कर ऐसा ही कर सकता है। (मैं एक स्ट्रोक में जगह ले करने के लिए रेगुलर एक्सप्रेशन से याद नहीं है, लेकिन यह आसान तरीका है)

paragraphElement.replace("<span>", ""); 
paragraphElement.replace("</span>", ""); 

Answer 5

<p>The weather is sure <span>sunny</span> today</p>; 


var span=document.getElementsByTagName('span')[0]; // get the span 
var pa=span.parentNode; 
while(span.firstChild) pa.insertBefore(span.firstChild, span); 

pa.removeChild(span); 

Answer 6

यदि आप एक jQuery समाधान की तलाश नहीं कर रहे हैं, तो यहां कुछ ऐसा जो हल्का वजन वाला है और आपके परिदृश्य पर केंद्रित है।

मैंने getText() नामक एक फ़ंक्शन बनाया और मैंने इसे बार-बार उपयोग किया। संक्षेप में, आप अपने p तत्व के बच्चे नोड्स प्राप्त कर सकते हैं और p नोड के भीतर सभी टेक्स्ट नोड्स पुनर्प्राप्त कर सकते हैं।

बस डोम में सब कुछ किसी प्रकार का नोड है। निम्नलिखित लिंक देखकर मैंने पाया कि टेक्स्ट नोड्स में संख्यात्मक nodeType 3 का मान है, और जब आप पहचानते हैं कि आपके टेक्स्ट नोड्स कहां हैं, तो आप उन्हें nodeValue प्राप्त कर सकते हैं और इसे संपूर्ण, गैर-टेक्स्ट-नोड-मुक्त से सम्मिलित करने के लिए वापस कर सकते हैं मूल्य।

https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nodeValue

var para = document.getElementById('p1') // get your paragraphe 
var texttext = getText(para);    // pass the paragraph to the function 
para.innerHTML = texttext     // set the paragraph with the new text 

function getText(pNode) { 

    if (pNode.nodeType == 3) return pNode.nodeValue; 

    var pNodes = pNode.childNodes  // get the child nodes of the passed element 
    var nLen = pNodes.length    // count how many there are 
    var text = ""; 

    for (var idx=0; idx < nLen; idx++) { // loop through the child nodes 
     if (pNodes[idx].nodeType != 3) { // if the child not isn't a text node 
      text += getText(pNodes[idx]); // pass it to the function again and 
              // concatenate it's value to your text string 
     } else { 
      text += pNodes[idx].nodeValue // otherwise concatenate the value of the text 
              // to the entire text 
     } 

    } 

    return text 
} 

मैं सभी परिदृश्यों के लिए इस परीक्षण नहीं किया है, लेकिन यह आप इस समय क्या कर रहे हैं के लिए करना होगा। यह प्रतिस्थापन स्ट्रिंग की तुलना में थोड़ा अधिक जटिल है क्योंकि आप टेक्स्ट नोड की तलाश में हैं और विशिष्ट टैग को हटाने के लिए हार्डकोडिंग नहीं कर रहे हैं।

गुड लक।

Answer 7

कोई अभी भी उस की तलाश में है, तो पूर्ण समाधान है कि मेरे लिए काम किया है:

मान लिया जाये कि हमने:

<p>hello this is the <span class="highlight">text to unwrap</span></p> 

js है:

// get the parent 
var parentElem = $(".highlight").parent(); 

// replacing with the same contents 
$(".highlight").replaceWith( 
    function() { 
     return $(this).contents(); 
    } 
); 

// normalize parent to strip extra text nodes 
parentElem.each(function(element,index){ 
    $(this)[0].normalize(); 
});