upwrap HTML of selected text using vanilla Javascript

Question

I am developing a wysiwyg editor and I am unable to remove the HTML that was added due to the previous actions.

To reproduce the problem: Select the text and bold it. Now try to un-bold it. I am able to remove the class but not the wrapping <span> . [I have logged the HTML in the console on every click event.]

Here is what I tried:

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

However, it doesnt remove the wrapping 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> 

How do I fix this?

Answer 1

我通过在用户提交表单时使用正则表达式过滤掉没有className的<span>来解决此问题。

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