I have a contenteditable div, and I want to split a node around a selection. Using execCommand(), I can toggle "bold" on or off for a selection, so if I have:
<b>ABCDEFGHI</b>
and select DEF, toggling "bold" gives me
<b>ABC</b>DEF<b>GHI</b>
where the <b> node has been split into two <b> nodes with a text node in between.
I want to be able to do the same with other elements not supported by execCommand(), for example <bdi>. In other words, if I start with
<bdi>ABCDEFGHI</bdi>
and select DEF, I want to end up with
<bdi>ABC</bdi>DEF<bdi>GHI</bdi>
I can test if the selection is contained in a surrounding <bdi> tag using range.commonAncestorContainer() and if not wrap the range in a <bdi> tag. However, what I want is the opposite: if there is an enclosing <bdi> node, I want to split it into (a) a well-formed <bdi> node before the selection, (b) a well-formed selection with no enclosing <bdi>, and (c) another well-formed <bdi> node after the selection, and then reassemble them. How can I do this?
EDIT: it seems that everyone believes I am trying to wrap a selection, but I'm not. Sergey's response below shows how to wrap some plain text, but I want something else.
Trying for a minimal reproducible example, consider the following:
<html>
<head></head>
<body>
<b>This text is <i>marked as
bold
with</i> some italic text too.</b>
</body>
</html>
Now what I want is to UNMARK the text "bold" so that the final result is:
<html>
<head></head>
<body>
<b>This text is <i>marked as</i></b>
<i>bold</i>
<b><i>with</i> some italic text too.</b>
</body>
</html>
Note that the text includes <i>...</i>, which must also be split. This is trivially easy with execCommand(), but I can't figure out how to do it without execCommand() (and hence do it for tags like <bdi> as well). I'm looking for a vanilla JS solutsion, not jQuery or Rangy please.
3 Answers 3
You never even need document.execCommand(). This function is deprecated, by the way.
Please consider this code sample:
const handleSelection = wrapIn => {
const selection = window.getSelection();
const node = selection.anchorNode;
if (node != selection.focusNode)
return; // just for simplicity
if (node == null || node.constructor != Text)
return; // just for simplicity
if (selection.rangeCount != 1)
return; // just for simplicity
const parent = node.parentElement;
const range = selection.getRangeAt(0);
const before = node.textContent.slice(0, range.startOffset);
const selected = node.textContent.slice(range.startOffset,
range.endOffset);
const after = node.textContent.slice(range.endOffset);
parent.innerHTML =
`${before}<${wrapIn}>${selected}</${wrapIn}>${after}`;
};
window.onload = () => {
window.addEventListener('keydown', event => {
if (event.ctrlKey && event.key == "y")
handleSelection("b");
});
};b { font-size: 120%; }
bdi { color: red; }<p>1234567890</p>
<p>123<bdi>45678</bdi>90</p>This code snipped is greatly simplified, to keep it short. It wraps a fragment in bold <b></b> on the key gesture Ctrl+Y. I made the modified text bigger, by CSS styling b to make the effect more visible.
The implementation is not complete, for the sake of simplicity. It does not work correctly across elements. To modify the DOM in the second line, where I have <bdi>45678</bdi>, you can select the text only inside the fragment 45678 (colored, for the clearer demo), or only outside it. Also, the operation doesn't work correctly if your selection combines both <p> elements. I did not care about those cases just to keep this demo as simple as possible.
You may want to refine it by processing all selection ranges and all nodes inside the selection, not just one text-only node in just one range, as in my example.
Added:
As the inquirer wasn't satisfied with this simplified sample, I added a different, a bit more complicated one. It splits the inline element in two.
const handleSelection = () => {
const selection = window.getSelection();
const node = selection.anchorNode;
if (node != selection.focusNode)
return; // just for simplicity
if (node == null || node.constructor != Text)
return; // just for simplicity
if (selection.rangeCount != 1)
return; // just for simplicity
const range = selection.getRangeAt(0);
const before = node.textContent.slice(0, range.startOffset);
const selected =
node.textContent.slice(range.startOffset,
range.endOffset);
const after = node.textContent.slice(range.endOffset);
const parent = node.parentElement;
const wrapIn = parent.tagName.toLowerCase();
console.log(selection.rangeCount);
const replacementNode = document.createElement("span");
parent.replaceWith(replacementNode);
replacementNode.innerHTML = `<${wrapIn}>${before}</${wrapIn}>${selected}<${wrapIn}>${after}</${wrapIn}>`;
};
window.onload = () => {
window.addEventListener('keydown', event => {
if (event.ctrlKey && event.key == "y")
handleSelection("b");
});
};b { font-size: 120%; }
bdi { color: red; }<p>1234567890</p>
<p>123<bdi>45678</bdi>90</p>This more complicated code also needs further development. It does work as it is, but for any practical purpose, you really need to classify the types of parent and apply different processing for different types. For example, I demonstrate splitting <p> into two separate paragraphs, but the code adds another <span>, and this is required only for an inline element. What to do, depends on your purpose. Besides, if you repeat the same operations with different overlapping ranges, it will complicate and mess up HTML structure. Ideally, you need to analyze this structure and simplify it, and this is not so simple. I would suggest that the entire idea of your requirements is not the best design, so you better think of something more robust. But this is up to you.
12 Comments
DEF? Could you do it yourself, or do you need a more complicated code sample? This is not hard to do, but it takes more time. Don't you think my demo is all you need to complete it?Added.I have used eventListener 'mousedown' together with 'mouseup' (which are fired at the beginning and end of text selection) together with the replace() method to replace innerHTML with desired included markup.
let selectedText
function getTheRange(){
const selection = document.getSelection();
if (selection.rangeCount > 0) {
selectedText = selection.toString()
return selectedText
}
}
function changeHtml(){
selectedText = getTheRange()
let domContent = document.querySelector('p').innerHTML
if(selectedText && selectedText.length>0){
document.querySelector('p').innerHTML = domContent.replace(selectedText,'<div><mark>'+selectedText+'</mark></div>')
}
}
//this is to avoid unwanted document multi-click selection
document.addEventListener('mousedown', (e)=>{
if(e.detail>1) e.preventDefault()
})
//------------------
document.addEventListener('mousedown', getTheRange)
document.addEventListener('mouseup', changeHtml)<p>Hello the world</p>1 Comment
I have finally come up with a solution: first I wrap the selection in a <span>. Then I work up the tree from the selection range's commonAncestorContainer to the node I want to replace (<bdi> in this case, but this will work with any other element as well). I then create two <bdi> elements (before and after) and copy the child nodes into before until I get to the <span> node I created, and copy the rest to after.
Finally I use insertBefore() on the <bdi>'s parent node to insert before in front of <bdi>, then the child nodes of the <span> element, followed by after. I then remove the original <bdi>.
Result: the original <bdi> element has been replaced by a well-formed <bdi> node, followed by some unwrapped nodes, followed by another well-formed <bdi> node.
Oh, and if there is no enclosing <bdi> node, I just create one and use range.surroundContents() to wrap the selection, so that <bdi> is toggled on and off like execCommand() does for certain other tags.
Here is the code:
const copy = range.cloneContents();
//
// Test if selection is inside a BDI
//
let bdi = null;
for (let c = range.commonAncestorContainer; c != null; c = c.parentElement) {
if (c.nodeType == 1 && c.nodeName == "BDI") {
bdi = c;
break;
}
}
if (!!bdi) {
//
// Wrap the range in a <span>
//
const span = document.createElement("span");
span.appendChild(copy);
range.deleteContents();
range.insertNode(span);
//
// Now split the enclosing BDI node before and after the <span> node
//
const before = document.createElement("bdi");
const after = document.createElement("bdi");
let found = false;
for (let c = bdi.firstChild; c != null; c = bdi.firstChild) {
if (found) {
after.appendChild(c);
}
else if (c == span) {
found = true;
bdi.removeChild(bdi.firstChild);
}
else {
before.appendChild(c);
}
}
//
// Now insert "before", the <span> node contents and "after"
// in front of the BDI node, and remove the original BDI node
//
const p = bdi.parentElement;
p.insertBefore(before,bdi);
for (var c = span.firstChild; c != null; c = span.firstChild) {
p.insertBefore(c,bdi);
}
p.insertBefore(after,bdi);
p.removeChild(bdi);
}
else {
//
// No enclosing BDI, so wrap the selection
//
const bdi = document.createElement("bdi");
range.deleteContents();
range.insertNode(copy);
range.surroundContents(bdi);
}
9 Comments
<title> element can only be in the <head> Do have any idea what you're actually doing?
document.execCommand(), ever.