Question

I’m working on a web page that will display code inside pre tags, and need to render characters used to form HTML tags within those pre tags. I’m able to escape the greater-than and less-than symbols via jQuery/Javascript per my code below.

However, the combination of a forward slash and a greater than symbol (/>) is problematic. Additionally, I’m getting more expected results rendered in the final output when the page runs.

The contents of the pre tag are simple.

<pre>
    <abc />
    <xyz />
</pre>

Here is my jQuery code.

$(function(){
    $('pre').html(function() {
        //this.innerHTML = this.innerHTML.replace(new RegExp(['/>'],"g"), "#");
        //this.innerHTML = this.innerHTML.replace(new RegExp(['/'],"g"), "*");
        this.innerHTML = this.innerHTML.replace(new RegExp(['<'],"g"), "&lt;");
        this.innerHTML = this.innerHTML.replace(new RegExp(['>'],"g"), "&gt;");
    });
});

When this runs, what I expect to happen is the page will render the following:

<abc/><xyz/>

Pretty simple. Instead, here is what gets rendered in Chrome, Firefox, and IE.

        <abc>
        <xyz>
</xyz></abc>

The tags get duplicated, and the forward slashes get moved after the less-than symbols. Presently I’m learning jQuery, so there may be something more fundamental wrong with my function. Thanks for your help.

Answer 1

You have some invalid HTML. The browser then tries to turn the invalid HTML into a DOM. jQuery then asks the browser to turn the DOM back into HTML. What it gets is a serialisation of the DOM at that stage. The original source is lost.

You can’t use jQuery to recover the original broken source of an HTML document (short of making a new HTTP request and forcing it to treat the response as plain text).

Fix the HTML on the server before you send it to the client.