Использование jQuery для замены одного тега другим

Question

Цель:

Используя jQuery, я пытаюсь заменить все вхождения:

<code> ... </code>

с:

<code><pre> ... 

Мое решение:

Я дошел до следующего,

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

");

Проблема с моим решением:

но проблема в том, что он заменяет все между (вторым, третьим, четвертым и т. Д.) Тегами «code» на содержимое между тегами first «code».

например.

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

становится

<code><pre> A 

 A 

 A 

Я думаю, что мне нужно использовать "это" и какую-то функцию, но я боюсь, что все еще учусь и не понимаю, как собрать решение вместе.

Answer 1

Сделано 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')

Answer 2

Вы можете использовать функцию hQml в jQuery. Ниже приведен пример замены кодового тега предварительным тегом при сохранении всех атрибутов кода.

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

Это может работать с любым набором тегов HTML-элементов, которые необходимо поменять местами при сохранении всех атрибутов предыдущего тега.

Answer 3

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

");});

Лучший и чистый способ.