How to convert sanitised html to back normal html in Javascript ?

vishalvickram1991

I have text editor component which has combination of different text like Bold, Italic, Underline. Whenever i enter value with combination text Bold, Italic, Underline, i am getting below text html format.

For now i haven't use combination of Bold, Italic, Underline. It's just normal text

actualResponse = {
textHtml: "<textformat leading="3">Normal Text</textformat>"
}
The above response need in below format before passing into request payload

expectedResponse = {
textHtml: "<TEXTFORMAT LEADING=\"3\">Normal Text</TEXTFORMAT>"
}

vishalvickram1991

I have used lodash property called unescape to get in html format and i am getting below format
<textformat leading="3">Normal Test</textformat>

Few things are missing like the tags are in lowercase as per expected response it should be in uppercase.

And some property is missing like below entire property is not coming

rpg2009

Have you looked at DOMParser?

Just having a play in the console

const domparser = new DOMParser()
const doc = domparser.parseFromString('&lt;textformat leading=&quot;3&quot;&gt;&lt;p align=&quot;LEFT&quot;&gt;Normal Text&lt;/p&gt;&lt;/textformat&gt;', 'text/html')

console.log(doc.body.innerText)

// output
<textformat leading="3"><p align="LEFT">Normal Text</p></textformat>

vishalvickram1991

rpg2009
I am also able to get the below

<textformat leading="3">Normal Text</textformat>

I believe below property is need to be added default

But i don't know how to get it in below format
<TEXTFORMAT LEADING=\"3\">Normal Text</TEXTFORMAT>"

rpg2009

vishalvickram1991 I believe below property is need to be added default

Wrapped around all text content? Is it fixed with these parameters, size, color etc

rpg2009

if there is no ready made solution, then regular expressions and a custom parser possibly.

where is the font face script/section coming from?

rpg2009

Ok so just a quick test

const htmlToParse = '&lt;textformat leading=&quot;3&quot;&gt;&lt;p align=&quot;LEFT&quot;&gt;Normal Text&lt;/p&gt;&lt;/textformat&gt;'

const domparser = new DOMParser()
const doc = domparser.parseFromString(htmlToParse, 'text/html')
const parsed = 
  doc.body.innerText
    .replace(/(<[^>]+>)/g, (whole, match) => match.toUpperCase())
    .replace(/(")/g, "\\$1")

console.log(parsed)

// Output
// <TEXTFORMAT LEADING=\"3\"><P ALIGN=\"LEFT\">Normal Text</P></TEXTFORMAT>

Obviously we have to deal with the FONT section.

Furthermore I'm not convinced this is a robust or comprehensive solution, but it's a start.

rpg2009

Right a rough solution

const htmlToParse = '&lt;textformat leading=&quot;3&quot;&gt;&lt;p align=&quot;LEFT&quot;&gt;Normal Text&lt;/p&gt;&lt;/textformat&gt;'

const fontWrapper = {
  open: '<FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1">',
  close: '</FONT>'
}

const domparser = new DOMParser()
const htmlString = domparser.parseFromString(htmlToParse, 'text/html').body.innerText
const parts = [...htmlString.matchAll(/(<[^>]+>)|([^<]+)/g)]

const parsed = parts.reduce((html, [whole, tagBlock, textContent]) => {
  if (tagBlock) {
    return `${html}${tagBlock.toUpperCase()}`
  } else if (textContent) {
    return `${html}${fontWrapper.open}${textContent}${fontWrapper.close}`
  }
  return html
}, ``).replaceAll('"', '\\"')

console.log(parsed)

// output
// <TEXTFORMAT LEADING=\"3\"><P ALIGN=\"LEFT\"><FONT FACE =\"ARIAL\" SIZE=\"11\" COLOR=\"#333333\" LETTERSPACING=\"0\" KERNING=\"1\">Normal Text</FONT></P></TEXTFORMAT>

rpg2009

Cleaned up a bit

const parseToHTML = (sanitized) => {
  const domparser = new DOMParser()
  const doc = domparser.parseFromString(sanitized, 'text/html')

  return doc.body.innerText
}

const htmlToActionScript = (html, { open = '', closed = '' }) => (
  html
    // tagblocks to uppercase
    .replace(/<[^>]+>/g, match => match.toUpperCase())
    // wrap text content
    .replace(/>([^<]+)</g, (match, content) => `>${open}${content}${closed}<`)
    // escape quotes
    .replace(/"/g, '\\"')
)

const sanitized = '&lt;textformat leading=&quot;3&quot;&gt;&lt;p align=&quot;LEFT&quot;&gt;Normal Text&lt;/p&gt;&lt;/textformat&gt;'

console.log(
  htmlToActionScript(
    parseToHTML(sanitized),
    {
      open: '<FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1">',
      closed: '</FONT>'
    }
  )
)

// Output
// <TEXTFORMAT LEADING=\"3\"><P ALIGN=\"LEFT\"><FONT FACE =\"ARIAL\" SIZE=\"11\" COLOR=\"#333333\" LETTERSPACING=\"0\" KERNING=\"1\">Normal Text</FONT></P></TEXTFORMAT>

vishalvickram1991

Appreciate the work which done by you. Thanks a lot.

VITSUSA

vishalvickram1991 rpg2009 provided a good solution, I hope vishalvickram1991 satisfied with this solution 🙂