Is it possible to trigger a native Backspace(deleting a character before the caret and having the caret move back a space) in javascript?

Question

How can I trigger a native Backspace(deleting a character before the caret and having caret move back a space) in JavaScript? I believe this is a duplicate of How to trigger backspace on a textfield?. But that is 10 years old and I also do not want to use jquery.

Been working on a basic text editor learning project. I want to have a caret placed in between tags(whether they be <b>in here</b> or </b>in here<b>) inside of a contenteditable div. I am able to choose a selection and place tags around them but am not able to get a caret in between empty tags (like when typing after having clicked on Bold or Italic without having selected text) without placing at least one character in there as well. I attempted to solve this by having an EventListener create a selection around the following user-inputted character and then adding tags around it but I find that if another KeyboardEvent happens too soon after that initial KeyboardEvent that added the tags(like 250ms or less), it results in no tags being added. So I need something that is more ready to go already when the following character is inputted by the user. This is an illustration of what I am referring to:

const textBody = document.querySelector("#text-body");
const preTag = document.querySelector("#pre-tag");
preTag.innerText = textBody.innerHTML.toString();
textBody.addEventListener("keyup", () => {
  preTag.innerText = textBody.innerHTML.toString();
});

<div id="text-body" contenteditable="true">
  <b>ABC</b><!--place caret here so user can type a 'D'--><b>EFG</b>
  <br/> HIJK<b><!--place caret here so user can type an 'L'--></b>MNOP
  <!--The 'D' would be uncharacteristically plain 
      and the 'L' uncharacteristically bold -->
</div>
<hr />
<pre id="pre-tag"></pre>

But what I have noticed is that if there is a character already in either of those 2 places with a caret after it and I hit Backspace so as to delete them and leave the caret there, that caret remains where I wanted it to be. So you can see, in this version I have placed zeros in the two desired locations. Now place a caret after them and then hit backspace to delete the '0' and then type a letter to see what I mean.

const textBody = document.querySelector("#text-body");
const preTag = document.querySelector("#pre-tag");
preTag.innerText = textBody.innerHTML.toString();
textBody.addEventListener("keyup", () => {
  preTag.innerText = textBody.innerHTML.toString();
});

yf

<div id="text-body" contenteditable="true">
  <b>ABC</b>0<b>EFG</b>HIJK<b>0</b>MNOP
</div>
<hr />
<pre id="pre-tag"></pre>

In the code of my project I am able to place characters there and the caret after those characters. But how could I trigger a native Backspace(deleting a character before the caret and having caret move back a space) in JavaScript? Is it possible? Or is there another way to achieve what my intention is?

As a note, a reason why I am currently pursuing this strategy is because my current code as of yet only consists of these tags, and no spans, assigning id's to tags of these types or adding spans to complement them would cause a major change to my current code. I am open to that but checking first to see if it is possible to avoid that. Thanks

const tag = {
  bold: {
    startTag: `<strong>`,
    endTag: `</strong>`,
  },
  italic: {
    startTag: `<em>`,
    endTag: `</em>`,
  },
  underline: {
    startTag: `<u>`,
    endTag: `</u>`,
  },
  sub: {
    startTag: `<sub>`,
    endTag: `</sub>`,
  },
  sup: {
    startTag: `<sup>`,
    endTag: `</sup>`,
  },
};

Update: I ended u going with spans instead as I was getting no hits on this. It works fine now but the code ended up a lot more complicated than I believe it would have been triggering a backspace(maybe anyways). So if anyone has an answer, i am still interested ;).