Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
like image 877
ClairelyClaire Avatar asked Apr 06 '11 17:04

ClairelyClaire


People also ask

Does innerHTML return a string?

Reading innerHTML causes the user agent to serialize the HTML or XML fragment comprised of the element's descendants. The resulting string is returned.

How do I write HTML code in innerHTML?

To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML. Example: html.

Can innerHTML contain HTML tags?

The innerHTML property takes a string that specifies a valid combination of text and elements. When the innerHTML property is set, the given string completely replaces the existing content of the object. If the string contains HTML tags, the string is parsed and formatted as it is placed into the document.

What does innerHTML return JavaScript?

The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.


2 Answers

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.

like image 198
celiker Avatar answered Sep 30 '22 14:09

celiker


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.

like image 41
vbence Avatar answered Sep 30 '22 14:09

vbence