修改的HTMLCollection返回所有的innerHTML

Question

我想用我的HTMLCollection剝離出來，它包含，例如元素的標籤，給出的HTML：

<p><span>Hello, <i>world!</i></span> Some more text</p> 

我想回

<p>Hello, <i>world!</i> Some more text</p> 

當我在我的html中搜索span標記時返回一個HTMLCollection，這似乎是我獲得所有span標記的最簡單方法，我該如何使用這個集合來完全去除標記並保留所有innerhtml ？

$scope.modifyHtml = function (html) { 
     var el = document.createElement('div'); 
     el.innerHTML = html; 

     var spans = el.getElementsByTagName('span'); 

     //Remove these spans from el but keep their inner! 

     return el.innerHTML; 
    } 

Answer 1

由於標記與jQuery

$scope.modifyHtml = function (html) { 
    var $tmp = $('<div />', { 
     html: html 
    }); 

    //remove span elements  
    $tmp.find('span').contents().unwrap(); 

    return $tmp.html() 
} 

演示：Fiddle

---

沒有jQuery的

$scope.modifyHtml = function (html) { 
    var el = document.createElement('div'), 
     spans, span, len; 
    el.innerHTML = html; 

    spans = el.getElementsByTagName('span'), span; 

    for (var i = 0; i < spans.length; i++) { 
     span = spans[i]; 
     len = span.childNodes.length; 
     for (var j = 0; j < len; j++) { 
      span.parentNode.insertBefore(span.childNodes[0], span) 
     } 
     span.parentNode.removeChild(span); 
    } 

    return el.innerHTML; 
} 

演示：Fiddle，Fiddle2