无法在Chrome中使用vanilla Javascript获取所选文本的HTML类名

我正在开发一个wysiwyg编辑器，我无法撤消我先前应用的效果

示例：如果我选择一些文本并加粗，效果很好。但是如果我想删除它的粗体效果，我无法将类名应用到所选文本。（JS中的第6行）在控制台中，我可以看到它实际上存在于

sel>anchorNode>nextElementSibling>className

下，但不确定为什么它不允许获取它

function replaceSelectedText（类名）{
var selectedText、sel、range；
if（window.getSelection）{
sel=window.getSelection（）；
//检查所选内容是否具有类
if（选择锚定节点）{
console.dir（sel）；
if（sel.anchorNode.nextElementSibling）{
log（“className:+sel.anchorNode.nextElementSibling.className”）；
}
}
selectedText=window.getSelection（）.toString（）；
//console.log（selectedText）；
如果（选择范围计数）{
范围=选择范围（0）；
range.deleteContents（）；
var-element=document.createElement（'span'）；
element.className=className；
element.textContent=selectedText；
range.insertNode（元素）；
}
}else if（document.selection&&document.selection.createRange）{
range=document.selection.createRange（）；
range.text=替换文本；
}
}
var toolbarButtons=document.queryselectoral（“工具栏按钮”）；
//console.log（工具栏按钮）；
对于（变量i=0；i

#可编辑{
边框：1px实心#000000；
边缘顶部：20px；
高度：50px；
字体系列：Arial；
}
.bold{
字体大小：粗体；
}
.斜体{
字体：斜体；
}

大胆的
斜体
同侧视野同侧视野

Chrome和Firefox似乎有各自的解决方案

Firefox:

sel.anchorNode.nextElementSibling.className

Chrome:

sel.baseNode.parentElement.className

我通过检测浏览器修复了它

检测浏览器：

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6

    if(isChrome){
        if(sel.baseNode.parentElement.className){
            console.log("isChrome className:" + sel.baseNode.parentElement.className);
            sel.baseNode.parentElement.className = "";
            return false;
        }
    }

    if(isFirefox){
        if(sel.anchorNode.nextElementSibling){
            console.log("isFirefox className:" + sel.anchorNode.nextElementSibling.className);
            sel.anchorNode.nextElementSibling.className = "";
            return false;
        }
    }

JS条件：

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6

    if(isChrome){
        if(sel.baseNode.parentElement.className){
            console.log("isChrome className:" + sel.baseNode.parentElement.className);
            sel.baseNode.parentElement.className = "";
            return false;
        }
    }

    if(isFirefox){
        if(sel.anchorNode.nextElementSibling){
            console.log("isFirefox className:" + sel.anchorNode.nextElementSibling.className);
            sel.anchorNode.nextElementSibling.className = "";
            return false;
        }
    }

---

演示：

您的代码在Firefox中工作37:

className:bold

@mhu如何在Chrome中工作？我发现

sel.anchorNode.parentElement.className

在Chrome中工作，但在Firefox中不工作。您可能应该检查节点的类型。似乎在我的大多数测试中，锚点节点是被选择的文本（textnode），如果是这种情况，您可以检查parentElement吗？