Javascript - using innerHTML to output strings WITHOUT HTML-encoded special characters?

Question

It appears that JavaScript auto-converts certain special characters into HTML entities when outputting content via the innerHTML() function. This is a problem, since I need to be able to output < and > without converting to gt; and lt;

Can this auto-conversion be prevented, reversed, or escaped? So far, no matter what I do, < and > are always automatically encoded into HTML entities.

Example code:

function DisplayQueries() {
    var IDs = ['AllOpenedINC','AllOpenedCRQ','AllClosedINC','AllClosedCRQ','SameDayINC','SameDayCRQ','NotSameDayINC','NotSameDayCRQ',
        'StillOpenINC','StillOpenCRQ','OpenOldINC','OpenOldCRQ','OtherQueuesINC','OtherQueuesCRQ']

    for (var i = 0; i < IDs.length; i++) {
        if (eval(IDs[i]))
            document.getElementById(IDs[i]).innerHTML = eval(IDs[i]);
    }
}

Example query variable:

AllOpenedINC = "('Company*+' = \"test\" OR 'Summary*' = \"%test%\") AND ('Submit Date' >= \"" + theDate +
    " 12:00:00 AM\" AND 'Submit Date' <= \"" + theDate + " 11:59:59 PM\")" + nameINC;

Can you post some sample code (and tell us which browser you're running it in)? — JW., Apr 06 '11 at 17:49
Do you want to insert tags (XML of some sort), then you can use .appendChild("");, but i have a feeling that is not what you want? — Guidhouse, Apr 06 '11 at 17:50
Someone solved this here: https://stackoverflow.com/a/7394787/2057171 — Albert Renshaw, Apr 29 '21 at 05:35

celiker · Answer 1 · 2011-04-06T19:29:55.223

4

You should focus on what you want to accomplish as a result, rather than the way of doing it. innerHTML() does encode, innerText() and textContent() do encoding too. So you should decode your strings if you want them as < or > back.

You can use this unescapeHTML() function to get your results as you want them.

 function unescapeHTML() {
    return this.stripTags().replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
  }

I hope this helps. I've copied it from Prototype.

edited Apr 06 '11 at 19:29

answered Apr 06 '11 at 18:24

celiker

875
7
15

I really, really don't want to use a JS framework just for one function. Is there a manual function that does what stripTags() does? – CXL Apr 06 '11 at 18:53
You don't have to use the framework. You can just use this function without using the framework. I have copied it from the framework for you. Include it inside your tags. – celiker Apr 06 '11 at 19:27

score 1 · Answer 2 · answered Apr 06 '11 at 17:52

1

I think your question is based on a false premise. Just make a very simple test:

document.getElementById("testdiv").innerHTML = '<h1><em>Hello</em></h1>';

if this works fine then the problem is not on the JS side, instead you use some other components in your system which HTML-encode your characters.

answered Apr 06 '11 at 17:52

vbence

20,084
9
69
118

Well, even if I do document.getElementById("testdiv").innerHTML = '< test >'; it still encodes the < and > as HTML entities. It seems like it only skips those for actual HTMl tags, maybe..? – CXL Apr 06 '11 at 17:59
@shifuimam It is possible that your string is passed directly to HTML parser and the characters which do not get interpreted as legal HTML get converted. - This is only a problem if you want to insert broken HTML into the document. Can I ask you what is your purpose with that? Maybe we can propose other solutions. - You can add this to your initial question. – vbence Apr 06 '11 at 18:04
I added an example of the text I am outputting to my original question. The text is a query that uses operands like <= and >= ..it's those symbols that are getting auto-converted to entities. – CXL Apr 06 '11 at 18:13
@shifuimam In your case I think the display on the screen will be right. Or will they be pőresented as entities in the HTML output? – vbence Apr 06 '11 at 18:19
the display is right, but the HTML code it outputs includes entities instead of raw characters. – CXL Apr 06 '11 at 18:54
Another scenario is when the HTML contains expressions such as `&check;`; this will typically get converted to a single checkmark character. I'm not even sure if it is possible to get back the original HTML, however, as the encoding is not a 1-to-1 function, i.e. you can also write `✓` and get the same character. There are often 3 or more ways of getting the same character so it is not possible to access the original un-encoded HTML. – cazort Apr 16 '23 at 17:55

score 0 · Accepted Answer · answered Apr 06 '11 at 20:39

0

I figured out what's going on. There's no easy way to prevent innerHTML from converting special characters to HTML entities, but since the problem was surfacing when copying the content of a DIV to the clipboard (using IE-only JS, which works since this is in a government environment where everyone has to use IE), I just used the replace() function to re-convert the HTML entities back to < and >.

answered Apr 06 '11 at 20:39

CXL

1,094
2
15
38

Yeah, innerHTML really isn't converting anything. In my case it was mustache templating that was converting stuff. – Aidan Ewen Jan 10 '15 at 11:07

score -7 · Answer 4 · edited Oct 20 '12 at 00:37

-7

You can use jquery and .append()

edited Oct 20 '12 at 00:37

Lodder

19,758
10
59
100

answered Jun 15 '12 at 16:20

Jeremy Umansky

1

Javascript - using innerHTML to output strings *WITHOUT* HTML-encoded special characters?

4 Answers4

Javascript - using innerHTML to output strings WITHOUT HTML-encoded special characters?