JSFiddle - React, Tailwind, and code Playground
HTML
<body onload="checkCookies()">
<div>This is a paragraph</div>
<div>
<em id="ignore">test</em>This is a second paragraph <strong>with</strong> fancy <p>content</p>
</div>
<ul id="output">
</ul>
</body>
JavaScript
document.addEventListener('ready',function(){
var s = window.getSelection();
var range = document.createRange();
range.setStart(1);
range.setEnd(4);
s.SetRange(1,4);
});
document.addEventListener('mouseup', function() {
var selection = window.getSelection();
//alert(JSON.stringify(selection.anchorOffset +":"+selection.focusOffset));
if (!selection.isCollapsed) {
// we have a non-zero length selection
var startNode = selection.anchorNode;
var startOffset = selection.anchorOffset;
if (startNode instanceof Element) {
// if it is an element then the offset is the child node index
startNode = startNode.childNodes[startOffset];
startOffset = 0;
}
var endNode = selection.focusNode;
var endOffset = selection.focusOffset;
if (endNode instanceof Element) {
// if it is an element then the offset is the child node index
endNode = endNode.childNodes[endOffset];
endOffset = 0;
}
//console.log(startNode, startOffset, endNode, endOffset);
var range = selection.getRangeAt(0);
var selectedText = range.toString();
var selectedFragment = range.cloneContents();
//console.log(selectedText);
//console.log(selectedFragment);
var clippedText = document.createElement('li');
clippedText.appendChild(selectedFragment);
document.getElementById('output').appendChild(clippedText);
var root = range.commonAncestorContainer;
//now let's split the text
if (endNode instanceof Text) {
endNode.splitText(endOffset);
}
if (startNode instanceof Text) {
startNode.splitText(startOffset);
startNode = startNode.nextSibling;
}
// filter out the element with id=ignore
function filterFunction(node) {
if (node.id === 'ignore') {
...