javascript - 用“内容”替换“带有内容的 HTML 标记”

Question

我需要更换

<span class='foo'>bar</span> 

和

bar

使用 JavaScript / jQuery。

注意：标签内容必须完全插入到标签所在的相同位置。

Answer 1

使用 jQuery，您可以使用replaceWith以下方法：

$(".foo").replaceWith(function() {
    return $(this).contents();
});​

演示：http: //jsfiddle.net/wwAu4/

Answer 2

一种普通的 JavaScript 方法如下：

function textUnwrap(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.textContent || el.innerText,
            textnode = document.createTextNode(text);
        el.parentNode.insertBefore(textnode, el.nextSibling);
        el.parentNode.removeChild(el);
    }
}

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

for (var i=0, len=spans.length; i<len; i++){
    if (spans[i].className.indexOf('foo') !== -1) {
        textUnwrap(spans[i]);
    }
}

JS 小提琴演示。

编辑了函数以缓存el.parentNode（因为我使用了两次）：

function textUnwrap(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.textContent || el.innerText,
            textnode = document.createTextNode(text),
            parent = el.parentNode;
        parent.insertBefore(textnode, el.nextSibling);
        parent.removeChild(el);
    }
}

JS 小提琴演示。

此外，再次更新函数，使用replaceChild()而不是insertBefore()and removeChild()：

function textUnwrap(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.textContent || el.innerText,
            textnode = document.createTextNode(text),
            parent = el.parentNode;
        parent.replaceChild(textnode, el);
    }
}

JS 小提琴演示。

Answer 3

 var $foo = $(".foo").first();
 $foo.replaceWith($foo.contents());

Answer 4

在我看来，您似乎还没有真正尝试过任何事情，但这应该可以帮助您入门：

var theElement = document.getElementById('foobar');// or: $('#foobar')[0]
theElement.parentNode.innerHTML = theElement.parentNode.innerHTML.replace(theElement.outerHTML, theElement.innerText);//<- done
//or:
theElement.parent.html(theElement.parent.html().replace(theElement[0].outerHTML,theElement.contents());

后者仅是 jQuery。可能有更干净的 jQ 方式，但我还是更喜欢纯 JS，所以我的重点是无工具包的方式

顺便说一句：如果您使用 jQuery，则使用 JavaScript（jQuery IS JavaScript）