অন্যটির সাথে একটি ট্যাগ প্রতিস্থাপন করতে jQuery ব্যবহার করা

100

গোল:

JQuery ব্যবহার করে, আমি এর সমস্ত উপস্থিতি প্রতিস্থাপন করার চেষ্টা করছি:

<code> ... </code>

সঙ্গে:

<pre> ... </pre>

আমার সমাধান:

আমি নিম্নলিখিত হিসাবে পেয়েছি,

$('code').replaceWith( "<pre>" + $('code').html() + "</pre>" );

আমার সমাধানের সাথে সমস্যা:

তবে সমস্যাগুলি হ'ল এটি প্রথম "কোড" ট্যাগের মধ্যে থাকা সামগ্রী (দ্বিতীয়, তৃতীয়, চতুর্থ, ইত্যাদি) "কোড" ট্যাগের মধ্যে সবকিছুর পরিবর্তে ।

যেমন

<code> A </code>
<code> B </code>
<code> C </code>

হয়ে

<pre> A </pre>
<pre> A </pre>
<pre> A </pre>

আমি মনে করি আমাকে "এটি" এবং কোনও ধরণের ফাংশন ব্যবহার করা দরকার তবে আমি ভয় করি যে আমি এখনও শিখছি এবং কীভাবে একসাথে সমাধান টুকরো করতে হবে তা সত্যিই বুঝতে পারি না।

javascript jquery replace

— জন
সূত্র

মোড়ক-মোড়ক না দেওয়া সমাধানটি এখন জোন স্থির করে দেখুন - এটি দেখুন;)

— জেনস রোল্যান্ড

157

আপনি .replaceWith ^{[ডক্স] এ} একটি ফাংশন পাস করতে পারেন :

$('code').replaceWith(function(){
    return $("<pre />", {html: $(this).html()});
});

ফাংশনের অভ্যন্তরে, thisবর্তমানে প্রক্রিয়াজাত codeউপাদানকে বোঝায় ।

ডেমো

আপডেট করুন: নেই কোন বড় কর্মক্ষমতা পার্থক্য , কিন্তু ক্ষেত্রে codeউপাদান, অন্যান্য এইচটিএমএল সন্তান আছে শিশু সংযোজন serializing তাদের সঠিক মতানুযায়ী পরিবর্তে:

$('code').replaceWith(function(){
    return $("<pre />").append($(this).contents());
});

— ফেলিক্স ক্লিং
সূত্র

1

এটি সবচেয়ে মার্জিত সমাধান বলে মনে হচ্ছে, আমি স্বীকার করব যে প্রতিস্থাপনের ফাংশনের ভিতরে কী চলছে আমি বুঝতে পারি না। আরও শুনতে ভাল লাগবে। অর্থাত কীভাবে খোলার ও ক্লোজিং ট্যাগগুলি অর্পণ করা হয়? <প্রাক /> এর স্থানটি কি এটি সম্পাদন করে?

— জন

2

@ জোন: নতুন উপাদান তৈরি করার জন্য এটি একটি ছোট হাত। আরও তথ্য এখানে পাওয়া যাবে: api.jquery.com/jQuery/#jQuery2 । jQuery সমস্ত উপাদানের উপর লুপ করে এবং তাদের প্রত্যেকের জন্য ফাংশন সম্পাদন করে ( .eachযা করছে তা একই )।

— ফেলিক্স ক্লিং

@ জোন: তবে জেনসের সমাধান আবার পরীক্ষা করে দেখুন, তিনি এটি ঠিক করেছেন।

— ফেলিক্স ক্লিংং

1

একটি দুর্দান্ত কৌশলটির জন্য +1 - এটি কেবলমাত্র সহজ ট্যাগ-ট্যাগ-ট্যাগ বিকল্পের চেয়ে অনেক বেশি ব্যবহৃত হতে পারে।

— জেনস রোল্যান্ড

@ ফেলিক্সকলিং কি এই কোড ট্যাগগুলির বৈশিষ্ট্যগুলিকে ওভাররাইট করে না?

— তেওয়াথিয়া

80

এটি অনেক সুন্দর:

$('code').contents().unwrap().wrap('<pre/>');

যদিও স্বীকার করা হয়েছে যে ফেলিক্স ক্লিংয়ের সমাধান প্রায় দ্বিগুণ দ্রুত :

— জেনস রোল্যান্ড
সূত্র

4

মনোমুগ্ধকর মতো কাজ করেছেন, আমার চোখের কাছে এটি মনে হয় এটি সর্বাধিক দক্ষ সমাধান। :)

— জন

আহা। হ্যাঁ, আপনি ছেলেরা ঠিক বলেছেন। এটি আমার পক্ষেও কার্যকর হয়নি। এটি ধরার জন্য ধন্যবাদ!

— জন

1

এফডাব্লুআইডাব্লু, $('code').children()উপরের উদাহরণের জন্য একটি খালি jQuery অবজেক্ট ফিরিয়ে দেবে, কারণ codeউপাদানগুলির কোনও শিশু উপাদান নোড নেই। যদিও এটি কাজ করে যদি শিশু উপাদান।

— ফেলিক্স ক্লিং

1

স্থির - সত্য, যখন সামগ্রীতে একটি পাঠ্য নোড থাকে, children()কাজ করবে না। contents()পরিবর্তে ব্যবহার পুরোপুরি কার্যকর। jsfiddle.net/7Yne9

— জেনস রোল্যান্ড

1

এখানে একটি জেএসপিআরফ সংস্করণ রয়েছে যা পৃষ্ঠাটি ভাঙ্গবে না: jsperf.com/subst રચના-one-tag-for-another-with-jquery/2 এবং আপনি দেখতে পাচ্ছেন গতির পার্থক্যটি এত বিশাল নয়। আপনার সমাধানটি ধীর গতির কারণ আপনি প্রতি উপাদান হিসাবে দুটি ডিওএম ম্যানিপুলেশনগুলি সম্পাদন করেন: unwrapপিতামাতাকে সরিয়ে এবং wrapগাছগুলিতে বাচ্চাদের যুক্ত করে, তাদের আবার বিচ্ছিন্ন করে এবং একটি নতুন পিতামাতাকে যুক্ত করে।

— ফেলিক্স ক্লিংং

26

এটি সঠিক যে আপনি সর্বদা প্রথম codeবিষয়বস্তু পাবেন, কারণ $('code').html()আপনি যেখানেই এটি ব্যবহার করেন না কেন সর্বদা প্রথম উপাদানটিকে উল্লেখ করবেন।

পরিবর্তে, আপনি .eachসমস্ত উপাদানগুলির পুনরাবৃত্তি করতে এবং প্রতিটিকে পৃথকভাবে পরিবর্তন করতে ব্যবহার করতে পারেন :

$('code').each(function() {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
    // this function is executed for all 'code' elements, and
    // 'this' refers to one element from the set of all 'code'
    // elements each time it is called.
});

— pimvdb
সূত্র

12

এটা চেষ্টা কর:

$('code').each(function(){

    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );

});

http://jsfiddle.net/mTGhV/

— Kokos
সূত্র

কি দারুন. আপনি ছেলেরা একে অপরের 2 সেকেন্ডের মধ্যে ঠিক একই সমাধানটি নিয়ে এসেছিলেন। ক্ষুদ্র বিন্যাসের পার্থক্য রয়েছে। কোনটি উঁচুতে হবে তা আমি নিশ্চিত নই - থোমাসের উত্তরে ফাংশন এবং () এর মধ্যবর্তী স্থানটি আমি সত্যিই পছন্দ করি না এবং কোকোস উত্তরের খালি জায়গার 2 লাইনটি সুন্দর বিন্দুযুক্ততা + (এর মধ্যে একটি স্থান থাকা উচিত) এবং {

— মাইকেল বাইলস্ট্র্রা

11

এ কেমন?

$('code').each(function () {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
});

— তায়ে-সং শিন
সূত্র

6

ফেলিক্সের উত্তরে বিল্ডিং।

$('code').replaceWith(function() {
    var replacement = $('<pre>').html($(this).html());
    for (var i = 0; i < this.attributes.length; i++) {
        replacement.attr(this.attributes[i].name, this.attributes[i].value);
    }
    return replacement;
});

এটি codeপ্রতিস্থাপন preট্যাগগুলিতে ট্যাগগুলির বৈশিষ্ট্যগুলি পুনরুত্পাদন করবে ।

সম্পাদনা করুন: এটি এমনকি অন্য ট্যাগগুলির codeমধ্যে innerHTMLথাকা সেই ট্যাগগুলিকেও প্রতিস্থাপন করবে code।

function replace(thisWith, that) {
    $(thisWith).replaceWith(function() {
        var replacement = $('<' + that + '>').html($(this).html());
        for (var i = 0; i < this.attributes.length; i++) {
            replacement.attr(this.attributes[i].name, this.attributes[i].value);
        }
        return replacement;
    });
    if ($(thisWith).length>0) {
        replace(thisWith, that);
    }
}

replace('code','pre');

— tewathia
সূত্র

2

এখন পর্যন্ত সেরা উত্তর। অন্যান্যগুলি হ'ল অনেকগুলি একই রকম যা সত্যই বিজোড় যে লোকেরা তাদের উত্সাহ দেয়। গুণাবলীর একমাত্র ব্যক্তি যা গুণাবলী সম্পর্কে চিন্তা করেছিল।

— গিলহার্ম ডেভিড দা কোস্টা

3

JQuery 1.4.2 হিসাবে:

$('code').replaceWith(function(i,html) {
  return $('<pre />').html(html);
});

তারপরে আপনি নতুন উপাদান নির্বাচন করতে পারেন:

$('pre').css('color','red');

সূত্র: http://api.jquery.com/replaceWith/#comment-45493689

জেএসফিডাল: http://jsfiddle.net/k2swf/16/

— সাইমন
সূত্র

2

আপনি যদি ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে থাকেন তবে আপনি:

নতুন উপাদান তৈরি করুন
পুরানো উপাদানগুলির বাচ্চাদের নতুন উপাদানে সরান
পুরানোটির আগে নতুন উপাদান .োকান
পুরানো উপাদান সরান

এই প্রক্রিয়াটির jQuery সমতুল্য এখানে:

$("code").each(function () {
    $("<pre></pre>").append(this.childNodes).insertBefore(this);
    $(this).remove();
});

এখানে jsperf URL হল:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

দ্রষ্টব্য: যে ব্যবহার সকল সমাধান .html()বা .innerHTMLহয় ধ্বংসাত্মক ।

— সালমান আ
সূত্র

2

আর একটি সংক্ষিপ্ত ও সহজ উপায়:

$('code').wrapInner('<pre />').contents();

— ফ্যাবিয়ান ভন এলার্টস
সূত্র

0

$('code').each(function(){
    $(this).replaceWith( "<pre>" + $(this).html()  + "</pre>" );
    });

সেরা এবং পরিষ্কার উপায়।

— Nimek
সূত্র

0

আপনি jQuery এর এইচটিএমএল ফাংশন ব্যবহার করতে পারেন। নীচে একটি নমুনা দেওয়া হচ্ছে কোডের সমস্ত বৈশিষ্ট্য ধরে রাখার সময় একটি প্রাক ট্যাগের সাথে একটি কোড ট্যাগকে প্রতিস্থাপন করে।

    $('code').each(function() {
        var temp=$(this).html();
        temp=temp.replace("code","pre");
        $(this).html(temp);
    });

এটি আগের ট্যাগের সমস্ত বৈশিষ্ট্য বজায় রেখে অদলবদল করা দরকার এমন কোনও এইচটিএমএল উপাদান ট্যাগগুলির সেট সহ কাজ করতে পারে।

— অর্ণব সি।
সূত্র

0

jqueryপ্লাগইন তৈরি , বৈশিষ্ট্য বজায় রাখা।

$.fn.renameTag = function(replaceWithTag){
  this.each(function(){
        var outerHtml = this.outerHTML;
        var tagName = $(this).prop("tagName");
        var regexStart = new RegExp("^<"+tagName,"i");
        var regexEnd = new RegExp("</"+tagName+">$","i")
        outerHtml = outerHtml.replace(regexStart,"<"+replaceWithTag)
        outerHtml = outerHtml.replace(regexEnd,"</"+replaceWithTag+">");
        $(this).replaceWith(outerHtml);
    });
    return this;
}

ব্যবহার:

$('code').renameTag('pre')

— JagsSparrow
সূত্র

0

এখানে প্রদত্ত সমস্ত উত্তর ধরে নিয়েছে (যেমন প্রশ্নের উদাহরণটি ইঙ্গিত করে) যে ট্যাগটিতে কোনও বৈশিষ্ট্য নেই। যদি স্বীকৃত উত্তরটি এতে চালিত হয়:

<code class='cls'>A</code>

যদি প্রতিস্থাপন করা হবে

<pre>A</pre>

আপনি যদি বৈশিষ্ট্যগুলি পাশাপাশি রাখতে চান - তবে কোনও ট্যাগের পরিবর্তে এর অর্থ কী হবে ...? এটি সমাধান:

$("code").each( function(){
    var content = $( "<pre>" );

    $.each( this.attributes, function(){ 
         content.attr( this.name, this.value );
    } );

    $( this ).replaceWith( content );
} );

— প্যাট্রিক
সূত্র

আমি জানি এটি কয়েক বছরের পুরনো তবে আমি ভেবেছিলাম আমি উল্লেখ করব ... আপনি আগের উপাদানটি থেকে এইচটিএমএল রাখতে ভুলে গেছেন। আপনার কোড স্নিপেটে আপনি কেবলমাত্র শিশুদের কোনও অনুলিপি না করে বৈশিষ্ট্যগুলি সহ একটি নতুন উপাদান তৈরি করছেন।

— এক বন্ধু

এটি যোগ করে করা হবেcontent.html( this.html )

— প্যাট্রিক