एक HTML टैग निकालें लेकिन इनरएचटीएमएल रखें

Question

मेरे पास कुछ सरल HTML हैं जिन्हें मुझे सरल स्वरूपण पट्टी करने की आवश्यकता है।

A nice house was found in <b>Toronto</b>.

मुझे बोल्ड को हटाने की जरूरत है, लेकिन वाक्य को बरकरार रखें।

यह jQuery में कैसे संभव है?

Answer 1

$('b').contents().unwrap();

यह सभी <b>तत्वों का चयन करता है, फिर पाठ सामग्री को लक्षित करने के लिए उपयोग करता.contents() है <b>, फिर.unwrap() इसके मूल <b>तत्व को निकालने के लिए ।

---

सबसे बड़े प्रदर्शन के लिए, हमेशा मूलनिवासी जाएं:

var b = document.getElementsByTagName('b');

while(b.length) {
    var parent = b[ 0 ].parentNode;
    while( b[ 0 ].firstChild ) {
        parent.insertBefore(  b[ 0 ].firstChild, b[ 0 ] );
    }
     parent.removeChild( b[ 0 ] );
}

यह यहां दिए गए किसी भी jQuery समाधान की तुलना में बहुत तेज़ होगा।

Comments

+1 मैं वहाँ बैठा था, जिसके बारे में समरूप उत्तर के बारे में लिख रहा था unwrap()और यह याद नहीं कर पाया कि पाठ का हिस्सा कैसे प्राप्त किया जाए, यह भूल गया .contents()- उत्कृष्ट।

— परिक्रमा

हालांकि यह काम करता है, यह .replacewith()अतिरिक्त DOM ट्रैवर्सल की वजह से काफी धीमी है ... यदि यह <b>केवल HTML के साथ टैग है तो यह और भी तेज हो जाता है।

— निक Craver

इसके अलावा, यदि आप किसी विशिष्ट स्पैन या फॉन्ट टैग को खोलना चाहते हैं, तो आप कुछ इस तरह से कर सकते हैं: $ ("। ClassName फॉन्ट")। सामग्री ()। Undrap ();

— स्टीव

अगर html <div> abc </ div> abc ब्रेक लाइन नहीं है? ब्रेक लाइन के लिए <div> का उपयोग करने पर मैं इसे कैसे पकड़ सकता हूं? @ user113716

— Hoa.Tran

धन्यवाद, यह बहुत मददगार था। मैंने निकटवर्ती पाठ नोड्स को मर्ज करने के parent.normalize()बाद जोड़ा parent.removeChild(...। यदि आप पृष्ठ को लगातार संशोधित कर रहे हैं तो यह मददगार था।

— जस्टिन हैरिस

Answer 2

आप .replaceWith()इस तरह का भी उपयोग कर सकते हैं :

$("b").replaceWith(function() { return $(this).contents(); });

या यदि आप जानते हैं कि यह सिर्फ एक स्ट्रिंग है:

$("b").replaceWith(function() { return this.innerHTML; });

यह एक बड़ा अंतर बना सकता है अगर आप बहुत सारे तत्वों को उजागर कर रहे हैं क्योंकि या तो ऊपर का दृष्टिकोण लागत की तुलना में काफी तेज है .unwrap()।

Comments

निक, मुझे वास्तव में आपका उत्तर पसंद है। मैंने दूसरे को इसलिए चुना क्योंकि मैं अपने iPad ऐप (स्थानीय डेटा) में इसके लिए उपयोग किए जाने वाले टैग / पाठ की मात्रा बहुत कम है, इसलिए प्रदर्शन बहुत महत्वपूर्ण नहीं है। मेरे लिए बनाए रखने के लिए पार्टिक का जवाब थोड़ा सरल है। 2 महान समाधानों पर बालों को विभाजित करना, लेकिन मैं केवल एक चेक दे सकता था।

— इयान विंक

@ BahaiResearch.com - यदि प्रदर्शन कोई मुद्दा नहीं है तो पूरी तरह से सरल जाना ... मैं सिर्फ इस जो इस बारे में :) का संबंध हो सकता है बाद में इसे खोजने दूसरों के लिए उपलब्ध कराने के कर रहा हूँ

— निक Craver

मैं एक टेक्स्टबॉक्स के साथ इस उदाहरण का उपयोग करने की कोशिश कर रहा था, लेकिन यह मुझे मार रहा था क्योंकि अंदर की सामग्री HTML टैग थी जिसका मैं मूल्यांकन करना चाहता था और केवल पाठ के रूप में प्रदर्शित नहीं किया गया था। मैंने प्रयोग करके समाप्त कर दिया: $ ('टेक्सारिया')। रिप्लेसविथ (फ़ंक्शन () {रिटर्न $ (यह; ओवल) (};));

— विल सैंपसन

Answer 3

आंतरिक HTML तत्वों को हटाने और केवल पाठ को वापस करने का सबसे सरल तरीका JQuery .text () फ़ंक्शन होगा ।

उदाहरण:

var text = $('<p>A nice house was found in <b>Toronto</b></p>');

alert( text.html() );
//Outputs A nice house was found in <b>Toronto</b>

alert( text.text() );
////Outputs A nice house was found in Toronto

jsFiddle डेमो

Answer 4

इस बारे में कैसा है?

$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));

पहली पंक्ति bटैग के HTML सामग्री को टैग के बाद सीधे स्थान पर कॉपी कर देती है b, और फिर दूसरी पंक्ति bडोम से टैग को हटा देती है , केवल इसकी कॉपी की गई सामग्री को छोड़ देती है।

मैं इसे सामान्य रूप से एक फ़ंक्शन में लपेटता हूं ताकि इसका उपयोग आसान हो जाए:

function removeElementTags(element) {
   element.insertAdjacentHTML("afterend",element.innerHTML);
   element.parentNode.removeChild(element);
}

सभी कोड वास्तव में शुद्ध जावास्क्रिप्ट हैं, केवल JQuery का उपयोग किया जा रहा है जो लक्ष्य को तत्व का चयन करने के लिए है ( bपहले उदाहरण में टैग)। समारोह सिर्फ शुद्ध है जेएस: डी

इसे भी देखें:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 5

// For MSIE:
el.removeNode(false);

// Old js, w/o loops, using DocumentFragment:
function replaceWithContents (el) {
  if (el.parentElement) {
    if (el.childNodes.length) {
      var range = document.createRange();
      range.selectNodeContents(el);
      el.parentNode.replaceChild(range.extractContents(), el);
    } else {
      el.parentNode.removeChild(el);
    }
  }
}

// Modern es:
const replaceWithContents = (el) => {
  el.replaceWith(...el.childNodes);
};

// or just:
el.replaceWith(...el.childNodes);

// Today (2018) destructuring assignment works a little slower
// Modern es, using DocumentFragment.
// It may be faster than using ...rest
const replaceWithContents = (el) => {
  if (el.parentElement) {
    if (el.childNodes.length) {
      const range = document.createRange();
      range.selectNodeContents(el);
      el.replaceWith(range.extractContents());
    } else {
      el.remove();
    }
  }
};

Answer 6

एक और देशी समाधान (कॉफी में):

el = document.getElementsByTagName 'b'

docFrag = document.createDocumentFragment()
docFrag.appendChild el.firstChild while el.childNodes.length

el.parentNode.replaceChild docFrag, el

मुझे नहीं पता कि यह user113716 के समाधान से अधिक तेज़ है, लेकिन कुछ के लिए समझना आसान हो सकता है।

Answer 7

सबसे सरल उत्तर है मन उड़ाना:

आउटरएचटीएमएल इंटरनेट एक्सप्लोरर 4 के लिए समर्थित है !

यहाँ jQuery के बिना जावास्क्रिप्ट के साथ भी करना है

function unwrap(selector) {
    var nodelist = document.querySelectorAll(selector);
    Array.prototype.forEach.call(nodelist, function(item,i){
        item.outerHTML = item.innerHTML; // or item.innerText if you want to remove all inner html tags 
    })
}

unwrap('b')

यह पुराने IE सहित सभी प्रमुख ब्राउज़र में काम करना चाहिए। हाल के ब्राउज़र में, हम नोडलिस्ट पर भी सही कॉल कर सकते हैं।

function unwrap(selector) {
    document.querySelectorAll('b').forEach( (item,i) => {
        item.outerHTML = item.innerText;
    } )
}