JSFiddle - React, Tailwind, and code Playground
HTML
<div contenteditable="true" style="background:#ccc" id="texteditor">Edit me!</div>
<button id="thebutton">Click me</button>
JavaScript
document.getElementById("thebutton").onclick = doTheThing;
function doTheThing() {
var elem = document.getElementById("texteditor");
var text = elem.innerText || innerTextPolyfill(elem);
alert(text);
}
function innerTextPolyfill(elem){
var sel = window.getSelection();
// Remember old selection
oldRanges = [];
for (i=0; i < sel.rangeCount; i++){
oldRanges.push(sel.getRangeAt(i));
}
sel.removeAllRanges();
// Get elem text
elemRange = document.createRange();
elemRange.selectNode(elem);
sel.addRange(elemRange);
text = sel.toString();
// Restore old selection and return
sel.removeAllRanges();
for (i=0; i < oldRanges.length; i++){
sel.addRange(oldRanges[i]);
}
return text;
}