One effective way to remove bold formatting from text that has been altered using execCommand

Question

One effective way to remove bold formatting from text that has been altered using execCommand

While I am utilizing document.execCommand to bold and underline text, what I really need is a button that can unbold the text and remove any underlining instead of just toggling them. Unfortunately, using execCommand("removeFormat") is causing some issues within my program. Do you know of any workaround I could use to achieve this unbolding/un-underline effect?

window.addEventListener('keydown', function (event) {
  if (event.altKey){
    if (event.code === 'Digit1') {
// Unbold, unhighlight, un-underline // 
      document.execCommand("hiliteColor", false, "transparent")      
      changeFont('7.5pt') /* This goes into a function to change the fontsize */
  }

javascript

Answer 1

Answer №1

To completely eliminate all formatting, simply substitute the HTML with its text equivalent:

const editor = document.getElementById("editor");
document.getElementById("unformat").addEventListener("click", () => {
  editor.innerHTML = editor.innerText;
});

<div id="editor" contenteditable>Mess <u>with me</u>, and <b>add crazy</b> formatting <b>to your heart&apos;s <u>content</u></b> then click <code>UNFORMAT</code></div>
<button id="unformat">UNFORMAT</button>

~~If you want to only remove bolded text, you could replace the bold nodes with text, like this:~~ Should you wish to individually unformat something, it can be done in a similar manner (demonstrated with bolding):

const editor = document.getElementById("editor");
document.getElementById("unbold").addEventListener("click", () => {
  // get all bolded elements
  Array.from(editor.getElementsByTagName("b")).forEach(i => {
    i.outerHTML = i.innerHTML; 
  });
});

<div id="editor" contenteditable>Mess <u>with me</u>, try <b>bolding</b> random <b>parts <u>then</u></b> click <code>UNBOLD</code></div>
<button id="unbold">UNBOLD</button>

Answer 2

To completely eliminate all formatting, simply substitute the HTML with its text equivalent:

const editor = document.getElementById("editor");
document.getElementById("unformat").addEventListener("click", () => {
  editor.innerHTML = editor.innerText;
});

<div id="editor" contenteditable>Mess <u>with me</u>, and <b>add crazy</b> formatting <b>to your heart&apos;s <u>content</u></b> then click <code>UNFORMAT</code></div>
<button id="unformat">UNFORMAT</button>

~~If you want to only remove bolded text, you could replace the bold nodes with text, like this:~~ Should you wish to individually unformat something, it can be done in a similar manner (demonstrated with bolding):

const editor = document.getElementById("editor");
document.getElementById("unbold").addEventListener("click", () => {
  // get all bolded elements
  Array.from(editor.getElementsByTagName("b")).forEach(i => {
    i.outerHTML = i.innerHTML; 
  });
});

<div id="editor" contenteditable>Mess <u>with me</u>, try <b>bolding</b> random <b>parts <u>then</u></b> click <code>UNBOLD</code></div>
<button id="unbold">UNBOLD</button>

One effective way to remove bold formatting from text that has been altered using execCommand

Answer №1

Similar questions

The backface remains visible despite being designated as "hidden"

Compensating for the variations in camera rotation specifications between standard and virtual reality mode within the aframe framework

Am I utilizing React hooks correctly in this scenario?

Arrange the array so that the item is placed at the beginning while maintaining the original order

Using Angular's async, you can retrieve a value returned by a promise

Sending a parameter to a different function (on a separate webpage)

Vercel - Deploying without the need to promote the project

Improving React efficiency: What techniques can be used to prevent the entire component from re-rendering every time a prop changes?

Having trouble retrieving the value of an object in Angular

Issue with remove functionality in Vue js implementation causing erratic behavior in my script

Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

Using Javascript's Speech Recognition to activate a button

Click here to navigate to the same or a different page using an anchor

Exploring JS inheritance concepts including the use of .call, .create,

Create a dynamic animation using three.js

Arrange an array of objects to a specific sequence

Using an onclick function to increment and decrement values

The error message "Seed is not defined" is raised when the program attempts to

What is the process of setting up Express as an API web server and integrating a custom document renderer as middleware?

Having trouble with the Mysqli query not functioning properly in PHP code after being dispatched via Ajax