Using Javascript to format an HTML string to display properly

Question

The back end hands off a string that gets displayed like:

"Hello, This notice is to inform you that you are in violation of HR POLICY XXXXX."

The point of this page is to let you easily copy-paste pre-generated emails, but spewing out a bunch of html tags through the sentences is unwanted.

The string in question is inside of a with an id of "textBlock".

The back end is Java with an Oracle DB. I can edit the java to some extent and I can't touch the DB at all. I've used the console to play around with the string and editing it in any way seems to make it display properly once I finish editing. The innerText includes tags like in my summary, the innerHTML displays the tags like .

So far I've attempted to give the an onload attribute that calls a function named formatText(); that does: temp var = document.getElementById("textBlock").innerText; document.getElementById("textBlock").innerText = var;

as well as the above function with innerHTML instead of innerText. I've also tried using document.write(); but that clears the rest of the page.Finally I've added some random characters in front of the string and tried to use the replace("!@#","") function to replace those in an effort to mimic the "editing it in any way seems to make it display properly" that I noticed.

java

out.println("<td align=left id=textBlock onload=formatText();> !@#" + strTemp + "</td>" );

Expected:

Hello,

This notice is to inform you that you are in violation of HR POLICY XXXXX.

Actual:

Hello, This notice is to inform you that you are in violation of HR POLICY XXXXX.

It seems like the HTML tags in the string aren't real HTML tags, but rather encoded with entities (<, >), which make them appear like HTML but not parsed as such. Have you checked the source string? — Pantalaimon
– Pantalaimon, Commented Jun 25, 2019 at 13:20
Have you tried document.getElementById("textBlock").innerHTML = The_String_That_You_Get_From_Backend; — Enzy
– Enzy, Commented Jun 25, 2019 at 13:22
@Pantalaimon I got someone with DB access to check the DB and they are stored as , , etc... NOT as encoded entities. — CasinoRoyale
– CasinoRoyale, Commented Jun 25, 2019 at 14:15
@Enzy I tried var placeholder = document.getElementById("textBlock"); document.getElementById("textBlock").innerHTML = placeholder.innerHTML; which should yield the same result. I've also tried innerText in place of innerHTML to see if that would make a difference. Neither worked :( — CasinoRoyale
– CasinoRoyale, Commented Jun 25, 2019 at 14:17
@CasinoRoyale is there any processing done on the output of the DB query that may alter it before out.println-ing the data? Or maybe you're using a procedure like HTP.ESCAPE_SC in your query? — Pantalaimon
– Pantalaimon, Commented Jun 25, 2019 at 16:12

João Pimentel Ferreira · Accepted Answer · 2019-06-26 00:04:06Z

2

What you want, if I understood correctly, is some stripping html tags function. You can use regex

var str = "Hello, <br><br> This notice is to inform you that you are in violation of <font color=red><b>HR POLICY XXXXX</b></font>."

console.log(str)

var str2 = str.replace(/<[^>]*>?/gm, '')

console.log(str2)

If you want the html element to render your html, you need to use the DOM property innerHtml

var str = "Hello, <br><br> This notice is to inform you that you are in violation of <font color=red><b>HR POLICY XXXXX</b></font>."

document.getElementById('myDiv').innerHTML = str

<div id="myDiv">Hi</div>

edited Jun 26, 2019 at 0:04

answered Jun 24, 2019 at 20:04

João Pimentel Ferreira

16.5k13 gold badges98 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CasinoRoyale Over a year ago

I'd like for the tags to be read as html and cause text formatting rather than just a string with tags in it. I've updated the Actual vs Expected above to try and better reflect this

João Pimentel Ferreira Over a year ago

@CasinoRoyale edited accordingly. Is that ok? Any issues let me know

Pantalaimon · Accepted Answer · 2019-06-25 21:40:50Z

1

(resolved in comments, answer added for completeness)

When HTML tags are visible in the browser, it's usually encoded with html-entities, preventing it getting parsed as HTML. In this case a post-processing script was replacing the < and > characters to their entity counterparts < and >.

Disabling these replacements resolved the issue.

answered Jun 25, 2019 at 21:40

Pantalaimon

5963 silver badges14 bronze badges

Collectives™ on Stack Overflow

Using Javascript to format an HTML string to display properly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related