如何删除HTML标签，但保留文本，然后更换标签？

Question

<ruby><rb>自分</rb><rp>（</rp><rt>じぶん</rt><rp>）</rp></ruby>

我想删除<ruby>代码，但我想保留内容。我希望在页面上使用所有<ruby>标记。

我甚至不知道如何尝试，我有想法将HTML内容保留在变量中，使用<ruby>删除hide()标记，然后重新启动文本，但我不知道我不知道如何在特定的文本部分重新插入它。另外，我正在努力each。

我还想记住标签的删除位置，以便稍后点击即可将其取回。

Answer 1

使用unwrap功能：

$('ruby').unwrap();

http://api.jquery.com/unwrap/

修改

如何按照上述链接中的教程示例进行类似操作？

pTags = $('ruby');

if ( pTags.parent().is("span") ) {
  pTags.unwrap();
  pTags.wrap("<ruby></ruby>");
} else {
  pTags.unwrap();
  pTags.wrap("<span class='unwrapped_ruby'></span>");
}

打开<ruby>标记，并用占位符<span>标记将其打包。

更新1：

好吧，我之前的代码有正确的“伪代码”，但我测试了它并且它无法正常工作。相反，我必须做这样的事情：

pTags = $('ruby');
var content = pTags.contents();

$("button").click(function () {
    if (content.parent().is("span")) {
        content.unwrap().wrapAll("<ruby></ruby>");
    } else {
        content.unwrap().wrapAll("<span class='unwrapped_ruby'></span>");
    }
});

更新2：

更新1未考虑多个<ruby>标记。我已更新代码，以便它适用于多个ruby标记以及嵌套的<ruby>标记！

var wrapper = $('ruby');
var content;

$("button").click(function () {
    wrapper.each(function () {
        content = $(this).contents();
        if (content.parent().is("span")) {
            content.unwrap().wrapAll("<ruby></ruby>");
            wrapper = $('ruby');
        } else {
            content.unwrap().wrapAll("<span class='unwrapped_ruby'></span>");
            wrapper = $('span.unwrapped_ruby');
        }
    });

});

尝试jsfiddle

Answer 2

如果您只是想删除ruby标记，可以执行以下操作：

$(document).ready(function(){
    var cont = $('ruby').contents().unwrap();
    $('html').append(cont)
});

<强> DEMO