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 アプローチの 1 つとして、次のものがあります。

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しました（2回使用しているため）：

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 フィドルのデモ。

また、再び関数を更新し、 and の代わりに使用し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 フィドルのデモ。

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)