javascript – 删除contenteditable中选择内的所有HTML标记

我有一个< div />这是可以容忍的,并且可以包含几种类型的 HTML元素,例如< span />,< a />,< b />,< u />等等.

现在,当我在我的目标中选择文本时,我希望有一个按钮来删除选择中的所有样式.

例1：

选择：

Hello <b>there</b>. I am <u>a selection</u>

会成为：

Hello there. I am a selection

例2：

选择：

<a href="#">I am a link</a>

会成为：

I am a link

你明白了……

我找到了这个有用的功能https://stackoverflow.com/a/3997896/1503476,用自定义文本替换当前选择.但我无法先获取选择的内容,并在替换前删除标签.我怎样才能做到这一点？

解决方法

我这样做的方法是迭代选择内的节点并删除内联节点(可能单独留下< br>元素).这是一个例子,为方便起见使用我的 Rangy库.它适用于所有主流浏览器(包括IE 6),但不是很完美：例如,它不会拆分部分选定的格式元素,这意味着部分选择的格式元素被完全删除,而不仅仅是选定的部分.解决这个问题会更棘手.

演示：http://jsfiddle.net/fQCZT/4/

码：

var getComputeddisplay = (typeof window.getComputedStyle != "undefined") ?
    function(el) {
        return window.getComputedStyle(el,null).display;
    } :
    function(el) {
        return el.currentStyle.display;
    };

function replaceWithOwnChildren(el) {
    var parent = el.parentNode;
    while (el.hasChildNodes()) {
        parent.insertBefore(el.firstChild,el);
    }
    parent.removeChild(el);
}


function removeSelectionFormatting() {
    var sel = rangy.getSelection();

    if (!sel.isCollapsed) {
        for (var i = 0,range; i < sel.rangeCount; ++i) {
            range = sel.getRangeAt(i);

            // Split partially selected nodes 
            range.splitBoundaries();

            // Get formatting elements. For this example,we'll count any
            // element with display: inline,except <br>s.
            var formattingEls = range.getNodes([1],function(el) {
                return el.tagName != "BR" && getComputeddisplay(el) == "inline";
            });

            // Remove the formatting elements
            for (var i = 0,el; el = formattingEls[i++]; ) {
                replaceWithOwnChildren(el);
            }
        }
    }
}
​