I store in a variable my range that the user has selected.
var sel, range, off, tags;
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
var off = sel.anchorOffset;
}
else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
var off = document.selection.anchorOffset;
}
return range;
html
<div ng-mouseup="mouseUpEvent(e)" ng-keyup="keyUpEvent()" contenteditable data-element="textBlock" id="markdown-body">
Chicken ipsum dolor sit amet, consectetur adipiscing elivolutpat volutpat. Nunc imperdiet urna et orci mattis,
pellentesque posuere enim pellentesque. Aenean id orci et nunc venenatis vestibulum et et ligula. Morbi mollis ornare purus
non blandit.<b> Phasellus egestas</b>, ipsum <i>sit amet finibus </i>pellentesque, <span style="color: red;">tellus urna
lobortis tellus, id tincidunt </span>Piza house byys nget lectus. Proin pulvinar enim non mi vestibulum interdum.
Sed nisl enim, sagittis non vestibulum eget, congue pellentesque ipsum. Nullam nec interdum elit
</div>
I have located my anchorNode and my focusNode. So i have selected my node that nodeName "B". Stand for Bold.
If I do element.nodeName my output will be "B".
if I output my element I get <b> Phasellus egestas</b>
I also got a selected range, and I have selected "asellus eges"
I would like to remove <b> tags. and add tags to the select range.
If I take the innerHTML of the element and replace it, than I mess up by select range.
I have seen that people suggest doing finding the parent and than selecting the childNode and removing and doing something like:
element[index].parentNode.removeChild(element[index]);
But that will cause an issue if my Parent has two child nodes with the same nodeName.
I already got the element to select the specific Node , how do I keep the innerConnet & HTML markup but delete the b tags?
Enter a tagName in the text box and click the UNWRAP button in the Snippet. All details are commented in the Snippet.
SNIPPET
function unWrap(wrap) {
if (!wrap) {
console.log('Enter a valid selector without quotes');
}
// Reference the node to unwrap
var removeThis = document.querySelector(wrap);
if (removeThis == "undefined" || removeThis == false) {
console.log('Selector doesn\'t exist in DOM.');
}
// Reference the wrapper's parent
var parent = removeThis.parentNode;
// Move all of wrapper's descendants...
while (removeThis.firstChild) {
/* ...by taking the wrapper's first child...
|| ...and placing it in front of the wrapper.
|| ...Eventually, all of wrapper's children...
|| ...are it's siblings now.
*/
parent.insertBefore(removeThis.firstChild, removeThis);
}
// Once the wrapper is empty, remove it
parent.removeChild(removeThis);
}body {
color: white;
}
header,
footer {
background: cyan;
color: black;
}
table {
border: 3px solid gold;
width: 300px;
}
td {
border: 1px solid tomato;
}
section {
border: 8px dashed blue;
}
main {
background: #444;
}
b {
background: yellow;
color: #444;
}
input {
float: right;
width: 12ch;
}
.as-console {
color: blue;
}<main>
MAIN
<section>
SECTION
<header>HEADER</header>
<p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
<p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
<p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
<p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
<p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
<table>
<form id='f1' name='f1'>
<input type='button' value='UNWRAP' onclick='unWrap(document.forms[0].txt.value)'>
<input name='txt'>
</form>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<footer>FOOTER</footer>
</section>
</main>