/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Feb 18.2021

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"><p align="LEFT">Normal Text</p></textformat>”
}
The above response need in below format before passing into request payload

expectedResponse = {
textHtml: “<TEXTFORMAT LEADING=”3″><P ALIGN=”LEFT”><FONT FACE =”ARIAL” SIZE=”11″ COLOR=”#333333″ LETTERSPACING=”0″ KERNING=”1″>Normal Text</FONT></P></TEXTFORMAT>”
}

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@vishalvickram1991authorFeb 18.2021 — I have used lodash property called unescape to get in html format and i am getting below format

<textformat leading="3"><p align="LEFT">Normal Test</p></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

<FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1"><FONT>
Copy linkTweet thisAlerts:
@rpg2009Feb 18.2021 — Have you looked at [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)?

Just having a play in the console
``javascript<i>
</i>const domparser = new DOMParser()
const doc = domparser.parseFromString('&amp;lt;textformat leading=&amp;quot;3&amp;quot;&amp;gt;&amp;lt;p align=&amp;quot;LEFT&amp;quot;&amp;gt;Normal Text&amp;lt;/p&amp;gt;&amp;lt;/textformat&amp;gt;', 'text/html')<i>
</i>`</CODE>
<CODE lang="javascript">`javascript<i>
</i>console.log(doc.body.innerText)

// output
&lt;textformat leading="3"&gt;&lt;p align="LEFT"&gt;Normal Text&lt;/p&gt;&lt;/textformat&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@vishalvickram1991authorFeb 18.2021 — @rpg2009#1628224

I am also able to get the below

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

I believe below property is need to be added default

<FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1"><FONT>

But i don't know how to get it in below format

<TEXTFORMAT LEADING="3"><P ALIGN="LEFT"><FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1">Normal Text</FONT></P></TEXTFORMAT>"
Copy linkTweet thisAlerts:
@rpg2009Feb 18.2021 — if there is no ready made solution, then regular expressions and a custom parser possibly.

where is the font face script/section coming from?
Copy linkTweet thisAlerts:
@rpg2009Feb 18.2021 — Ok so just a quick test

``javascript<i>
</i>const htmlToParse = '&amp;lt;textformat leading=&amp;quot;3&amp;quot;&amp;gt;&amp;lt;p align=&amp;quot;LEFT&amp;quot;&amp;gt;Normal Text&amp;lt;/p&amp;gt;&amp;lt;/textformat&amp;gt;'

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

console.log(parsed)

// Output
// &lt;TEXTFORMAT LEADING="3"&gt;&lt;P ALIGN="LEFT"&gt;Normal Text&lt;/P&gt;&lt;/TEXTFORMAT&gt;<i>
</i>``
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.
Copy linkTweet thisAlerts:
@rpg2009Feb 18.2021 — > @vishalvickram1991#1628229 I believe below property is need to be added default
>
> <FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1"><FONT>

Wrapped around all text content? Is it fixed with these parameters, size, color etc
Copy linkTweet thisAlerts:
@rpg2009Feb 18.2021 — Right a rough solution

``javascript<i>
</i>const htmlToParse = '&amp;lt;textformat leading=&amp;quot;3&amp;quot;&amp;gt;&amp;lt;p align=&amp;quot;LEFT&amp;quot;&amp;gt;Normal Text&amp;lt;/p&amp;gt;&amp;lt;/textformat&amp;gt;'

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

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

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

console.log(parsed)

// output
// &lt;TEXTFORMAT LEADING="3"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1"&gt;Normal Text&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@rpg2009Feb 19.2021 — Cleaned up a bit

``javascript<i>
</i>const parseToHTML = (sanitized) =&gt; {
const domparser = new DOMParser()
const doc = domparser.parseFromString(sanitized, 'text/html')

return doc.body.innerText
}

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

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

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

// Output
// &lt;TEXTFORMAT LEADING="3"&gt;&lt;P ALIGN="LEFT"&gt;&lt;FONT FACE ="ARIAL" SIZE="11" COLOR="#333333" LETTERSPACING="0" KERNING="1"&gt;Normal Text&lt;/FONT&gt;&lt;/P&gt;&lt;/TEXTFORMAT&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@vishalvickram1991authorFeb 19.2021 — Appreciate the work which done by you. Thanks a lot.
Copy linkTweet thisAlerts:
@VITSUSAFeb 19.2021 — @vishalvickram1991#1628245 rpg2009 provided a good solution, I hope vishalvickram1991 satisfied with this solution :)
×

Success!

Help @vishalvickram1991 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...