Getting raw text content of HTML element with HTML uninterpreted

Question

I have Googled my brains out and can't figure out how to make this work. Here is what I'm 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 those alerts interpret and return the " as " in the resulting string. I want to get the raw text with " uninterpreted.

They all return:

"Hi, my name is.."

When I want to get:

&quot;Hi, my name is..&quot;

Is there a way to do this? Preferably without trying to use a regex to replace every instance of " with ".

It's kind of a long story of what I'm trying to do, but simply using replace() to search and replace every instance of " would be a headache to implement because of other regex matching/parsing that needs to occur.

Thanks in advance for any Javascript wizards who can save my sanity!

note: your missing quotes in your id attribute `
` should be `
` — Jake Zeitz, Mar 14 '13 at 20:12
Sorry, it can't be done. AFAIK once the browser parses the character entity codes there's no difference between `"` and `"`. — JJJ, Mar 14 '13 at 20:17
@JakeZeitz not really ;) quotes are helpful, but not allways a need... — yckart, Mar 14 '13 at 20:18
@yckart interesting, I always assumed they would be required. It is probably still good practice to include them — Jake Zeitz, Mar 14 '13 at 20:20
@JakeZeitz yap, I agree! However for the correctness I had the need to correct you ;) — yckart, Mar 14 '13 at 22:55

score 11 · Accepted Answer · edited May 23 '17 at 12:25

To quote bobince

When you ask the browser for an element node's innerHTML, it doesn't give you the original HTML source that was parsed to produce that node, because it no longer has that information. Instead, it generates new HTML from the data stored in the DOM. The browser decides on how to format that HTML serialisation; different browsers produce different HTML, and chances are it won't be the same way you formatted it originally.

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

The only possible way to do this is with regex, or you can do an ajax post to the page itself, but that is a bad practice.

Well.. thanks for at least ending my attempt to figure this out. I was really afraid that might be the answer. Guess I'll have to go back to brute forcing some regex magic using Javascript's painfully crippled regex engine haha .. much appreciated, sir. — Trey, Mar 14 '13 at 21:23

yckart · Answer 2 · 2014-02-18T16:41:36.347

2

I prepared some days ago a bin with some 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() + ";";
});

edited Feb 18 '14 at 16:41

answered Mar 14 '13 at 20:16

yckart

32,460
9
122
129

Getting raw text content of HTML element with HTML uninterpreted

2 Answers2

Linked