Thay đổi thẻ nhưng giữ các thuộc tính và nội dung - jQuery/Javascript

Question

chữ

đổi thành

<p href="page.html" class="class1 class2" id="thisid">Text</p> 

Tôi quen với jQuery replaceWith nhưng điều đó không giữ thuộc tính/nội dung như xa như Tôi biết.

Lưu ý: Tại sao p có số href? Tôi cần thay đổi p trở lại a trên một sự kiện khác.

Answer 1

thử điều này:

var $a = $('a#thisid'); 
var ahref = $a.attr('href'); 
var aclass = $a.attr('class'); 
var aid = $a.attr('id'); 
var atext = $a.text(); 
$a.replaceWith('<p href="'+ ahref +'" class="'+ aclass +'" id="'+ aid+'">'+ atext +'</p>'); 

Answer 2

hacky rằng làm các trick

var p = $('a').wrapAll('<div class="replace"></div>'); 

var a = $('div').map(function(){ 
    return this.innerHTML; 
}).get().join(' '); 


$('div.replace').html(a.replace(/<a/g,'<p').replace(/a>/g,'p>')); 

demo

Answer 3

Dưới đây là một phương pháp chung chung hơn:

// New type of the tag 
var replacementTag = 'p'; 

// Replace all a tags with the type of replacementTag 
$('a').each(function() { 
    var outer = this.outerHTML; 

    // Replace opening tag 
    var regex = new RegExp('<' + this.tagName, 'i'); 
    var newTag = outer.replace(regex, '<' + replacementTag); 

    // Replace closing tag 
    regex = new RegExp('</' + this.tagName, 'i'); 
    newTag = newTag.replace(regex, '</' + replacementTag); 

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

Bạn có thể thử mã ở đây: http://jsfiddle.net/tTAJM/

Answer 4

Dưới đây là một phương pháp tôi sử dụng để thay thế các thẻ html trong jquery:

// Iterate over each element and replace the tag while maintaining attributes 
$('a').each(function() { 

    // Create a new element and assign it attributes from the current element 
    var NewElement = $("<p />"); 
    $.each(this.attributes, function(i, attrib){ 
    $(NewElement).attr(attrib.name, attrib.value); 
    }); 

    // Replace the current element with the new one and carry over the contents 
    $(this).replaceWith(function() { 
    return $(NewElement).append($(this).contents()); 
    }); 

}); 

Tôi cũng thường hạn chế nó vào một lớp học cụ thể, chẳng hạn như $('a.class1').each(function() ví dụ như ở trên.

Answer 5

Nó tốt hơn để tạo jQuery plugin cho tương lai lại khả năng sử dụng:

(function (a) { 
    a.fn.replaceTagName = function (f) { 
     var g = [], 
      h = this.length; 
     while (h--) { 
      var k = document.createElement(f), 
       b = this[h], 
       d = b.attributes; 
      for (var c = d.length - 1; c >= 0; c--) { 
       var j = d[c]; 
       k.setAttribute(j.name, j.value) 
      } 
      k.innerHTML = b.innerHTML; 
      a(b).after(k).remove(); 
      g[h - 1] = k 
     } 
     return a(g) 
    } 
})(window.jQuery); 

Cách sử dụng:

// Replace given object tag's name 
$('a').replaceTagName("p"); 

Ví dụ: JSFiddle

Answer 6

tôi đã làm cho nó thành một đồng bằng javascript chức năng:

function ReplaceTags(Original, Replace){ 
    var oarr = document.getElementsByTagName(Original); 
    for(i=0; oarr.length < i; i++){ 
var html = oarr[i].outerHTML; 
oarr[i].outerHTML = (html.replace(Original, Replace)); 
    } 
} 

Nếu bạn chỉ muốn thay thế một thẻ cụ thể, chỉ cần xóa vòng lặp for:

function ReplaceTag(Original, Replace, customi){ 
// If customi = 0 the first appearance will get replaced 
var i = customi; 
    if(i == undefined) 
    i=0; 
var oarr = document.getElementsByTagName(Original); 
var html = oarr[i].outerHTML; 
oarr[i].outerHTML = (html.replace(Original, Replace)); 

}