JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to attach a "select" event to an input element.</p>
Select some text: <input type="text" value="Hello world!" id="myText">
<hr/>
Select text from number and push Get Selection
<br/>
<p id="demo">
1234567890
</p>
<button id="getSelection">Get Selection</button>
<button id="clearSelection">Clear Selection</button>
</body>
</html>
JavaScript
document.querySelector("#getSelection").addEventListener("click", function(e) {
var { target, text } = getSelectionTextAndContainerElement();
//just for checking
reselect(getPathFromElement(target), text);
});
document.querySelector("#clearSelection").addEventListener("click", function(e) {
var highlightDiv = document.querySelector("#highlightDiv");
if (typeof highlightDiv !== "undefined") {
var arr = [];
var parentNode = highlightDiv.parentNode;
debugger;
while (parentNode.firstChild) {
var firstChild = parentNode.firstChild;
if (firstChild.nodeType === 3) {
arr.push(firstChild.nodeValue);
}
else {
arr.push(firstChild.firstChild.nodeValue);
}
parentNode.removeChild(firstChild);
}
parentNode.appendChild(document.createTextNode(arr.join("")));
}
});
function getSelectionTextAndContainerElement() {
var text;
var containerElement = null;
if (typeof window.getSelection !== "undefined") {
var selection = window.getSelection();
if (selection.rangeCount) {
var node = selection.getRangeAt(0).commonAncestorContainer;
containerElement = node.nodeType == 1 ? node : node.parentNode;
text = selection.toString();
}
}
else if (typeof document.selection !== "undefined" && document.selection.type !== "Control") {
var textRange = document.selection.createRange();
containerElement = textRange.parentElement();
...