Retrieving the raw text content of an HTML element with uninterpreted HTML

Question

My brain flew out and I can’t figure out how to do this. Here is what I am trying to do:

HTML:

<div id=derp>&quot;Hi, my name is..&quot;</div> 

JavaScript:

 var div = document.getElementById('derp'); alert(div.innerHTML); alert(div.innerText); alert(div.textContent); 

All of these warnings interpret and return " like " in the resulting string. I want the source text to be " uninterpreted.

They all come back:

 "Hi, my name is.." 

When I want to receive:

 "Hi, my name is.." 

Is there any way to do this? Preferably, not trying to use a regular expression to replace each instance of " with "

This is a long story of what I'm trying to do, but just using replace () to find and replace each instance " will be a headache to implement because of the different regex matching / parsing that should happen.

Thanks in advance for any Javascript wizard who can keep my judgment!

Answer 1

To quote bobince

When you request a browser for a node element innerHTML, it does not give the HTML source code that was parsed to create the node, since it no longer has such information. Instead, it generates new HTML from data stored in the DOM. The browser decides how to format this HTML serialization; different browsers produce different HTML, and most likely it will not be the way you formatted it initially.

In short: innerHTML/innerText/text/textContent/nodeValue/indexOf , none of them will give you innerHTML/innerText/text/textContent/nodeValue/indexOf text.

The only possible way to do this is with regex, or you can make an ajax message on the page itself, but this is bad practice.

Answer 2

I prepared a basket a few days ago with different approaches: http://jsbin.com/urazer/4/edit

My favorite:

 var text = "<a href='#' title=\"Foo\"></a>"); var html = text.replace(/[<&>'"]/g, function(c) { return "&#" + c.charCodeAt() + ";"; });