javascript - 如何优雅的取消标签包裹？

Question

有一段HTML如下

<p>
    一直到一周以前，
    <span class="markpen-mark">我对流沙说</span>
    ，让风把我吹走吧。
</p>

我这样删除后

$('.markpen-mark').contents().unwrap();

会变成这样

如何删除它后，将它变成这样，标签 p 中的 childNodes 变成了 3 个 #text

在线示例http://codepen.io/linkgod/pen/HrmAj,

我也尝试这种方法

var parent = $('.markpen-mark').parent();
$('.markpen-mark').contents().unwrap();
parent.html(parent.html());

但是这样做的坏处就是，当parent中别的标签绑定的有事件的时候，会导致事件无法触发。

请问还有没有优雅的解法呀？

Answer 1

var el = document.querySelector('.markpen-mark');
el.previousSibling.textContent += el.textContent + el.nextSibling.textContent;
el.parentNode.removeChild(el.nextSibling);
el.parentNode.removeChild(el);

特殊情况自己判断。

Answer 2

是要让 <p> 标签内部的所有元素都变成 textNode 类型的节点吗？
可以参考如下：

document.body.innerHTML='<p>aaa<span>bb</span>ccc</p>';

var p=document.querySelector('p');
[].slice.call(p.childNodes).forEach(function(node){
    if(node.nodeType != 3)
        p.replaceChild(document.createTextNode(node.textContent), node)
});

这样的话，p 内部的元素就变成3个 TextNode 类型的了

Answer 3

我会不告诉你，此时的 $("#aaa").html() 已经是 "一直到一周以前，我对流沙说让风把我吹走吧。" 了吗?

---

对于 js 来说已经很优雅了，不优雅的大概只有调试界面! →_→