javascript - 修改 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