Question

我需要替换

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

与

bar

使用JavaScript / jQuery。

注意：标记内容必须完全插入标记为的相同位置。

Answer 1

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

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

DEMO： 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 Fiddle demo

编辑该函数以缓存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 Fiddle demo

此外，再次对该函数进行更新，使用replaceChild()而不是insertBefore()和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 Fiddle demo

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，所以我的重点是免工具包的方法

BTW：如果你使用jQuery，你使用JavaScript（jQuery IS JavaScript）

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

4 个答案: