Using JavaScript to Remove Specific HTML Tags

Question

Using JavaScript to Remove Specific HTML Tags

Is there a way to remove specific tags

<font style="vertical-align: inherit;">

</font> while preserving the contents with JavaScript?

<div id="Box">
    <h1><font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">Meine Webseite</font></font>
    </h1>
    
    <p><font style="vertical-align: inherit;">
       <font style="vertical-align: inherit;">Hallo zusammen!</font></font>
    </p>
    
    <p><font style="vertical-align: inherit;">
       <font style="vertical-align: inherit;">Über diese Seite:</font></font>
    </p>
</div>

This is the desired outcome:

<div id="Box">
        <h1>Meine Webseite</h1>
        
        <p>Hallo zusammen!</p>
        
        <p>Über diese Seite:</p>
</div>

I need a JavaScript solution that can handle multiple font tags.

javascript

Answer 1

Answer №1

I recently wrote some easily understandable code on Codepen and it is functioning perfectly.

var font = document.querySelectorAll("#Box font");

for(let i=0; i<font.length; i++) {
  var parent = font[i].parentNode;
  console.log({parent})
  var text = document.createTextNode(font[i].innerText);
  parent.insertBefore(text, font[i])
  parent.removeChild(font[i])
}

You can check out the code on Codepen through this link => https://codepen.io/HARSH_VATS/pen/bGqeROz

Answer 2

I recently wrote some easily understandable code on Codepen and it is functioning perfectly.

var font = document.querySelectorAll("#Box font");

for(let i=0; i<font.length; i++) {
  var parent = font[i].parentNode;
  console.log({parent})
  var text = document.createTextNode(font[i].innerText);
  parent.insertBefore(text, font[i])
  parent.removeChild(font[i])
}

You can check out the code on Codepen through this link => https://codepen.io/HARSH_VATS/pen/bGqeROz

Answer 3

Answer №2

If you prefer using plain JavaScript to solve this, you can implement the following code snippet:

const boxElement = document.querySelector("#Box");
boxElement.querySelectorAll('font')
.forEach((element) => {
    const parentElement = element.parentElement;
    while (element.firstChild) parentElement.insertBefore(element.firstChild, element);
    parentElement.removeChild(element);
});

Answer 4

If you prefer using plain JavaScript to solve this, you can implement the following code snippet:

const boxElement = document.querySelector("#Box");
boxElement.querySelectorAll('font')
.forEach((element) => {
    const parentElement = element.parentElement;
    while (element.firstChild) parentElement.insertBefore(element.firstChild, element);
    parentElement.removeChild(element);
});

Answer 5

Answer №3

This solution seems to be functional, though its efficiency is uncertain

const container = document.querySelector("#Container");

for (const element of container.children) {
  for (const childElement of element.children) {
    element.innerText = childElement.innerText;
    childElement.remove();
  }
}

<div id="Container">
  <h1>
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">My Website</font>
    </font>
  </h1>

  <p>
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">Hello everyone!</font>
    </font>
  </p>

  <p>
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">About this page:</font>
    </font>
  </p>
</div>

Answer 6

This solution seems to be functional, though its efficiency is uncertain

const container = document.querySelector("#Container");

for (const element of container.children) {
  for (const childElement of element.children) {
    element.innerText = childElement.innerText;
    childElement.remove();
  }
}

<div id="Container">
  <h1>
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">My Website</font>
    </font>
  </h1>

  <p>
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">Hello everyone!</font>
    </font>
  </p>

  <p>
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">About this page:</font>
    </font>
  </p>
</div>

Answer 7

Answer №4

Jquery Solution :

$('#Container').find('span').contents().unwrap()

Regex Solution :

let element = document.getElementById("Container")
element.innerHTML = element.innerHTML.replaceAll(/<\/?span[^>]*>/g,"");

Answer 8

Jquery Solution :

$('#Container').find('span').contents().unwrap()

Regex Solution :

let element = document.getElementById("Container")
element.innerHTML = element.innerHTML.replaceAll(/<\/?span[^>]*>/g,"");

Using JavaScript to Remove Specific HTML Tags

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Fetch file name using Ajax

The error message UnhandledPromiseRejectionWarning is being thrown due to a MongoNetworkError that occurred while attempting to connect to the server at localhost:27017 for the first

What steps should I take to transform [“link”, “395868”] into [title: “link”, content: “395868”]?

Show jQuery block and make it fade in

Keystrokes may not consistently register in Firefox

Employ the function to write content onto a .js file

Looking for a specific portion of a key-value pair

repeating the identical content in the same setting

Is there a way to refresh a PHP file using Ajax?

Troubleshooting: Brackets Live Preview feature experiencing issues with jQuery

Creating a Fresh Row - Steps to Activate Datepickr on a Copied Row

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

What is the best way to transfer data received from a controller to Express' router?

Dealing with routing challenges in AngularJS and Symfony

What are the steps to utilizing three.js effectively?

What is the method for comparing a value in TypeScript that does not match a given value?

AngularJS form buttons are currently not active or validated

How to Retrieve Component HTML Output in Vue beyond the Template Tag?

Is it possible for me to include a variable with the xmlhttp response text?

Troubleshooting Issues with AngularJS HTTP.get Requests