Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

How to split a DOM node around a selection?

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  node has been split into two  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 ..., 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.

Answer*

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; }



 1234567890
 123<bdi>45678</bdi>90



This code snipped is greatly simplified, to keep it short. It wraps a fragment in bold `` 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 `` 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; }



 1234567890
 123<bdi>45678</bdi>90



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 `` into two separate paragraphs, but the code adds another ``, 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.

Draft saved

Draft discarded

Edit Summary*

Cancel

thanks, but this is wrapping, not unwrapping: ABCDEFGHI to ABC<bdi>DEF</bdi>GHI or whatever. I'm trying to go from <bdi>ABCDEFGHI</bdi> to <bdi>ABC</bdi>DEF<bdi>GHI</bdi>.

user1636349
– user1636349

2025年01月22日 16:52:43 +00:00
Commented Jan 22, 2025 at 16:52
@user1636349 — I wanted just to give you the idea on one sample, as simple as possible. You have everything to complete the code according to your a bit more complicated requirement. Are you saying that this conversion should happen if the selection is 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?

Sergey A Kryukov
– Sergey A Kryukov

2025年01月22日 16:59:08 +00:00
Commented Jan 22, 2025 at 16:59
@user1636349 — Okay, please see a more complicated code sample, in the section Added.

Sergey A Kryukov
– Sergey A Kryukov

2025年01月22日 17:37:00 +00:00
Commented Jan 22, 2025 at 17:37
What happens if the selection is not just plain text, though? See my edited version of the original question where the html is <bdi.........</bdi> and I want to extract part of the text inside ... from the BDI element. You are extracting the text and splitting that, rather than splitting the DOM tree, which is what I require. Notice how my question asks how you split it into WELL-FORMED chunks.

user1636349
– user1636349

2025年01月22日 19:20:01 +00:00
Commented Jan 22, 2025 at 19:20
"What happens if the selection is not just plain text, though?" I already answered. I added all you need to understand at the end of the recent revision of my solution. The main thing to understand is this: I already answered your question, and even a lot more, described all aspects. I won't be able to literally work for you more and more, you need to catch up and continue yourself. However, I question the merits of your requirements. At the same time, I'm ready to answer your further questions.

Sergey A Kryukov
– Sergey A Kryukov

2025年01月22日 20:58:12 +00:00
Commented Jan 22, 2025 at 20:58

| Show 7 more comments

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

How to split a DOM node around a selection?

Answer*