How to replace a html tag in js?

block.outerHTML = "<p>" + block.innerHTML + "</p>" 

where block is any HTML block it just left to select it correctly with:

var block = document.querySelector(".selector");

Since you just need to replace the string you can do this with just one replace statement.

text = text.replace(/<(\/*)font[^>]*>/g, '<$1p>');

If you using jQuery with replaceWith

$('font').replaceWith('<p>DATA ENTRY</p>');

First of all the font tag is deprecated and should not be used.

1. Get an array of the tags you want to replace.

   var elems = document.getElementsByTagName('font');
   

2. Go through loop and replace old HTML with new HTML

   for (var i = 0; i < elems.length; i++)
   {
       var target = elems[i].innerHTML;
       elems[i].innerHTML = target.replace(/(<p)/igm, '<font').replace(/<\/p>/igm, '</font>');
   }
   

Note: This is not tested but should work.

Try like this :

$('font').contents().unwrap().wrap('<p/>');

In javascript, you can do something like this :

var str="<font>hello world</font>";   
str = str.replace(/<font>/, "<p>");  
str = str.replace(/<\/font>/,"</p>"); 

You may use the DOM API, which is specifically built to manipulate HTML safely — unlike regex, which can easily break on nested or malformed HTML.

One such tool is DOMParser, which lets us turn a string of HTML into actual DOM elements that we can work with as if they were part of the page.

function replaceFontWithP(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');

  doc.querySelectorAll('font').forEach(font => {
    const p = document.createElement('p');
    p.innerHTML = font.innerHTML;
    font.replaceWith(p);
  });

  return doc.body.innerHTML;
}

const inputHTML = `
  <font color="blue">DATA ENTRY</font>
  <font class="beat"><b>Bold Text</b></font>
`;

const outputHTML = replaceFontWithP(inputHTML);
console.log(outputHTML);