如何删除一个标签，但是保留里面的内容？

Question

如题：

比如我们有如下一个HTML

<DIV>
    <P>
        我是正确的内容，blablablabla，这里是要删的<mark data-id='123'>哈哈<A>连接<A/>巴拉巴拉巴拉巴拉</mark>
    </P>
</DIV>

我们需要在用户进行某个操作时，删除掉特定的标签，比如上例中的data-id=123的mark标签。
请问各位大神，应该怎么做啊？

PS：<mark>可能有多个，可能是不同id的，也可能是相同id的。而且可能出现在任何位置。

Answer 1

先把要删除的标签内容复制出来，然后在该节点前插入进去，最后删除该节点

var html = $('mark[data-id="123"]').html();
$('mark[data-id="123"]').before(html);
$('mark[data-id="123"]').remove();

Answer 2

var markEles = document.getElementsByTagName("mark");
markEles.map(function(markEle){
    var markHtml = markEle.innerHTML;
    markEle.innerHTML = markHtml.replace(/<mark [^>]*>(.*)<\/mark>/,function($1,$2){return $2})
});

你贴上来的case替换是能用的，由于没有更多的case,不知道考虑完全没有

Answer 3

嗯嗯，在删除标签之前，拷贝一份出来，然后进行插入，最后将标签删掉，这是最容易想到的办法。
其实可以用一个变量来进行存储 mark 标签中的内容，显示mark的时候插入变量，删除的时候不用考虑如何拷贝，直接添加到p标签中。
最好的办法是用js框架进行操作，方便、直观、简洁。

Answer 4

可以使用正则表达式吗？

Answer 5

没怎么看懂。是删除特定标签？ 既然是特定标签，那么就应该找到特定标签的特征，一个个删除。 比如特征就是 所有的 <mark>.

$("p").find("mark").each(function(){
    var html=$(this).html();
    $(this).before(html).remove();
  });
});

如果是删除里面的所有 tag 直接 用 $('p').text()把 HTML 变成文本再次插入就OK 了。

Answer 6

看这里

Answer 7

document.getElementByTagName("div")innerHTML = document.getElementByTagName("div")innerHTML.replace(/<.+?>/g,"")
我这个思路是用正则表达式去掉尖括号

Answer 8

用法closetag(parent,tag,dataid)三个参数，第一个是父标签，第二个是要删除的tag，第三个是tag的data-id，若没传入data-id，则删除所有tag，若传入data-id，则删除有和传入data-id相同的tag

 <div>
        <P>
            我是正确的内容，blablablabla，这里是要删的<mark data-id='123'>哈哈<a>连接</a>巴拉巴拉巴拉巴拉</mark>
            <mark>哈哈2</mark>
        </P>
    </div>

   var p = document.getElementsByTagName('p')[0];
    closetag(p,"mark","123");
    function closetag(parent,tag,dataid){
        var tags = parent.getElementsByTagName(tag);
        for(var i=tags.length-1;i>=0;i--){
            if(dataid==null){
                tags[i].outerHTML = tags[i].innerHTML;                
            }else{
                if(tags[i].getAttribute("data-id")===dataid){
                    tags[i].outerHTML = tags[i].innerHTML;
                }
            }                
        }
    }

Answer 9

$("mark").each(function(){
    $(this).replaceWith($(this).html());
});