使用vanilla Javascript

Question

我正在开发一个所见即所得的编辑器，但由于之前的操作，我无法删除已添加的HTML。

重现问题：选择文本并加粗。现在尝试取消加粗。我可以删除类，但不能删除包<span>。 [我在每次点击活动时都在控制台中记录了HTML。]

以下是我的尝试：

        range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(selectedText));

但是，它不会删除包装HTML。

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

function replaceSelectedText(className) {
    var selectedText, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        selectedText = window.getSelection().toString();        
        console.log(selectedText);
        // check if selection has a class
        if(isChrome){
            if(sel.baseNode.parentElement.className && sel.rangeCount){
                console.log("isChrome className:" + sel.baseNode.parentElement.className);
                sel.baseNode.parentElement.className = "";
                
                range = sel.getRangeAt(0);
                range.deleteContents();  // doesnt delete the wrapping HTML
                range.insertNode(document.createTextNode(selectedText));
                
                return false;
            }
        }
        
        if(isFirefox){
            if(sel.anchorNode.nextElementSibling.className){
                console.log("isFirefox className:" + sel.anchorNode.nextElementSibling.className);
                sel.anchorNode.nextElementSibling.className = "";
                return false;
            }
        }
        
        
        //console.log(selectedText);
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var element = document.createElement('span');
            element.className = className;
            element.textContent = selectedText;
            range.insertNode(element);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = replacementText;
    }
}

var toolbarButtons = document.querySelectorAll("#toolbar button");
//console.log(toolbarButtons);
for (var i = 0; i < toolbarButtons.length; ++i) {
    toolbarButtons[i].addEventListener('click', function(){
        replaceSelectedText(this.id);
        console.log(document.getElementById("editable").innerHTML);
    });
}

#editable{
    border: 1px solid #000000;
    margin-top: 20px;
    height: 50px;
    font-family: Arial;
}

.bold{
    font-weight: bold;
}

.italic{
    font-style: italic;
}

<div id="toolbar">
    <button id="bold">Bold</button>
    <button id="italic">Italic</button>
</div>

<div id="editable" contentEditable="true">
    <div>Lorem Ipsum Lorem Ipsum</div>
</div>

我该如何解决这个问题？

Answer 1

我通过在用户提交表单时使用正则表达式过滤掉<span>而没有className来修复它。

sourceHTML = sourceHTML.replace(/\<span class=""\>([a-zA-Z0-9\s]+)\<\/span\>/g, "$1");