I want to a script that will remove format of selected text like document.execCommand(‘removeFormat’)
but nativly without this deprecated method. I am wondering what the algorithm behind this.
For example I have html.
<body>
1.
<div>
<h1>hello world</h1>
<span>
<b style="background-color: green">bold text</b>
</span>
<p style="background-color: red">1234</p>
</div>
</body>
I selected text from ‘hello’ to ’12’
The expected output might be
<body>
1.
hello world bold text 12
<p style="background-color: red">34</p>
</div>
</body>
first step. using window.getSelection() and window.getSelection().getRangeAt(0)
we can find beginning text node “hello world” and ending text node “12” (this could happen if we split text node “1234” in two text nodes “12” “34”).
Using beggining text node and ending text node we can get all text nodes between but how it can help me.
It seems we need to delete all tags before “hello world” until we hit not empty text node and same goes for end text node. We remove every html tag from beggining until we saw “1.” but at the end we saw “34” so I got closing div tag without opening div tag.
it seems I can use
let selection = window.getSelection();
selection.deleteFromDocument();
but it leaves empty tags
<div>
<h1></h1><p style="background-color: red">34</p>
</div>
and then some how add text using selection.toString()
There is a lot of edge cases and I struggle to understand the right approach.
dio is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.