এইচটিএমএল ট্যাগ সরান তবে অভ্যন্তরীণ HTML রাখুন

Question

আমার কিছু সাধারণ এইচটিএমএল রয়েছে যা আমার সাধারণ ফর্ম্যাটিংটি স্ট্রিপ করা দরকার।

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()অতিরিক্ত ডিওএম ট্র্যাভারসালের কারণে এটি তুলনামূলকভাবে ধীর হয় ... এটি যদি <b>কেবল এইচটিএমএল সহ কোনও ট্যাগ হয় তবে এটি আরও দ্রুত gets

— নিক Craver

এছাড়াও, আপনি যদি কেবল একটি নির্দিষ্ট স্প্যান বা হরফ ট্যাগটি মুছে ফেলতে চান তবে আপনি এর মতো কিছু করতে পারেন: $ ("। ClassName ফন্ট")। বিষয়বস্তু ()। আনপ্রেপ ();

— স্টিভ কোচরান

যদি এইচটিএমএল <div> abc </div> থাকে তবে abc ব্রেক লাইন ধরে না? <ডিভ> ব্রেক ব্রেকের জন্য ব্যবহার করলে আমি কীভাবে এটি ধরে রাখতে পারি? @ ব্যবহারকারী 113716

— হোয়া.ট্রান

আপনাকে ধন্যবাদ, এটি খুব সহায়ক ছিল। সংযুক্ত পাঠ্য নোডগুলিকে মার্জ করার parent.normalize()পরে আমি যুক্ত করেছি parent.removeChild(...। আপনি যদি ধারাবাহিকভাবে পৃষ্ঠাটি পরিবর্তন করে থাকেন তবে এটি সহায়ক ছিল।

— জাস্টিন হ্যারিস

Answer 2

আপনি এটির .replaceWith()মতো ব্যবহার করতে পারেন :

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

বা যদি আপনি জানেন তবে এটি কেবল একটি স্ট্রিং:

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

উপরের উভয় পদ্ধতির ব্যয়ের চেয়ে তুলনামূলক দ্রুততর হওয়ায় আপনি যদি প্রচুর পরিমাণে উপাদানকে সরিয়ে রাখেন তবে এটি একটি বড় পার্থক্য আনতে পারে .unwrap()।

Comments

নিক, আপনার উত্তরটিও আমি সত্যিই পছন্দ করি। আমি অন্যটি বেছে নিয়েছি কারণ আমি আমার আইপ্যাড অ্যাপ্লিকেশনটিতে (স্থানীয় ডেটা) এটির জন্য যে পরিমাণ ট্যাগ / পাঠ্য ব্যবহার করব তা তাই কর্মক্ষমতা খুব গুরুত্বপূর্ণ নয়। পার্টিকের উত্তরটি বজায় রাখা আমার পক্ষে কিছুটা সহজ। 2 দুর্দান্ত সমাধানগুলিতে চুলগুলি বিভক্ত করা হলেও আমি কেবল একটিটিকে চেক দিতে পারি।

— ইয়ান ভিঙ্ক

@ বাহাইরিসার্ক.কম - যদি পারফরম্যান্স কোনও সমস্যা না হয় তবে একেবারে সহজ হয়ে যান ... আমি এটি অন্যদের জন্য পরে প্রদান করছি যারা এ সম্পর্কে উদ্বিগ্ন হতে পারে :)

— নিক ক্র্যাভার

আমি এই উদাহরণটি একটি পাঠ্যবক্সের সাহায্যে ব্যবহার করার চেষ্টা করছিলাম তবে এটি আমাকে হত্যা করছিল কারণ অভ্যন্তরের সামগ্রীটি এইচটিএমএল ট্যাগ যা আমি মূল্যায়ন করতে চেয়েছিলাম এবং কেবল পাঠ্য হিসাবে প্রদর্শিত হয় নি। আমি ব্যবহার করে শেষ করেছি: $ ('টেক্সারিয়া') replace প্রতিস্থাপন (ফাংশন () {রিটার্ন $ (এটি) .ভাল ();});

— উইল সাম্পসন

Answer 3

অভ্যন্তরীণ এইচটিএমএল উপাদানগুলি সরিয়ে ফেলা এবং কেবলমাত্র পাঠ্য ফেরত দেওয়ার সহজ উপায়টি 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

jsFizz ডেমো

Answer 4

এ কেমন?

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

প্রথম লাইন bট্যাগের সরাসরি এইচটিএমএল বিষয়বস্তু ট্যাগের পরে সরাসরি অনুলিপি করে bএবং তারপরে দ্বিতীয় লাইনটি bকেবল এটির অনুলিপি করা সামগ্রীগুলি রেখে ডিওএম থেকে ট্যাগটি সরিয়ে দেয় ।

এটির ব্যবহার আরও সহজ করার জন্য আমি সাধারণত এটি একটি ফাংশনে আবদ্ধ করি:

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

সমস্ত কোড আসলে খাঁটি জাভাস্ক্রিপ্ট, কেবলমাত্র জিকুয়্যারি ব্যবহার করা হচ্ছে এটি লক্ষ্যটিকে লক্ষ্য করার জন্য উপাদানটি নির্বাচন করা ( 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

আমি জানি না এটি ব্যবহারকারীর 111116 এর সমাধানের চেয়ে দ্রুত কিনা তবে কারও কারও পক্ষে এটি বোঝা সহজ।

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;
    } )
}