Get elements content as plain text with all descendants

Question

I am confused about some simple mechanisms in jQuery. Let's assume I have got the following div container on my website:

<div id="myDiv">
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <mi>n</mi>
        <mo stretchy="false">≥</mo>
        <mn>2</mn>
        </mrow>
    </math>

    - Some text here
    > Some quote here
</div>

Now I want to retrieve the content without any modifications(!!!) and make some changes of my own afterwards.

First attempt

$('#myDiv').text();

Oh, all the child-tags are gone. Thats not what I want.

Second attempt

$('#myDiv').html();

Well, that looks better. But a closer look shows that the ">" in the last line is also HTML-encoded now. Thats not what I want.

Question

How can I get a plain text copy of the contents of a DOM-Element?

Update

Aside from the accepted answer and its hint for "unescaped text" I found this nice little workaround using a <script>-Tag .

Answer 1

You are relying on a quirk that > can sometimes be used like you are. Compare, for example, with < , which you can not use unescaped.

I'd say the output of .html() is what you want. In any context where you'd want to output the values, you want to make sure that plain text characters are encoded.

As far as I know, once the browser parses the code and builds the DOM tree, it does not store the original representation of that tree. In particular, it does not store anywhere the original optional chunks of syntax, such as present/missing optional quote characters or the amount of whitespace between tags.

Answer 2

You need to dig around a little to find out some possible solutions .

For eg, i dug around stack and saw these three threads such as THREAD1 , THREAD2 , THREAD3 .

Using these resources , i cooked up something like this :

//Translation Look Up
function get_html_translation_table (table, quote_style) {
  var entities = {},
    hash_map = {},
    decimal;
  var constMappingTable = {},
    constMappingQuoteStyle = {};
  var useTable = {},
    useQuoteStyle = {};

  // Translate arguments
  constMappingTable[0] = 'HTML_SPECIALCHARS';
  constMappingTable[1] = 'HTML_ENTITIES';
  constMappingQuoteStyle[0] = 'ENT_NOQUOTES';
  constMappingQuoteStyle[2] = 'ENT_COMPAT';
  constMappingQuoteStyle[3] = 'ENT_QUOTES';

  useTable = !isNaN(table) ? constMappingTable[table] : table ? table.toUpperCase() : 'HTML_SPECIALCHARS';
  useQuoteStyle = !isNaN(quote_style) ? constMappingQuoteStyle[quote_style] : quote_style ? quote_style.toUpperCase() : 'ENT_COMPAT';

  if (useTable !== 'HTML_SPECIALCHARS' && useTable !== 'HTML_ENTITIES') {
    throw new Error("Table: " + useTable + ' not supported');
    // return false;
  }

  entities['38'] = '&';
  if (useTable === 'HTML_ENTITIES') {
    entities['160'] = ' ';
    entities['161'] = '¡';
    entities['162'] = '¢';
    entities['163'] = '£';
    entities['164'] = '¤';
    entities['165'] = '¥';
    entities['166'] = '¦';
    entities['167'] = '§';
    entities['168'] = '¨';
    entities['169'] = '©';
    entities['170'] = 'ª';
    entities['171'] = '«';
    entities['172'] = '¬';
    entities['173'] = '­';
    entities['174'] = '®';
    entities['175'] = '¯';
    entities['176'] = '°';
    entities['177'] = '±';
    entities['178'] = '²';
    entities['179'] = '³';
    entities['180'] = '´';
    entities['181'] = 'µ';
    entities['182'] = '¶';
    entities['183'] = '·';
    entities['184'] = '¸';
    entities['185'] = '¹';
    entities['186'] = 'º';
    entities['187'] = '»';
    entities['188'] = '¼';
    entities['189'] = '½';
    entities['190'] = '¾';
    entities['191'] = '¿';
    entities['192'] = 'À';
    entities['193'] = 'Á';
    entities['194'] = 'Â';
    entities['195'] = 'Ã';
    entities['196'] = 'Ä';
    entities['197'] = 'Å';
    entities['198'] = 'Æ';
    entities['199'] = 'Ç';
    entities['200'] = 'È';
    entities['201'] = 'É';
    entities['202'] = 'Ê';
    entities['203'] = 'Ë';
    entities['204'] = 'Ì';
    entities['205'] = 'Í';
    entities['206'] = 'Î';
    entities['207'] = 'Ï';
    entities['208'] = 'Ð';
    entities['209'] = 'Ñ';
    entities['210'] = 'Ò';
    entities['211'] = 'Ó';
    entities['212'] = 'Ô';
    entities['213'] = 'Õ';
    entities['214'] = 'Ö';
    entities['215'] = '×';
    entities['216'] = 'Ø';
    entities['217'] = 'Ù';
    entities['218'] = 'Ú';
    entities['219'] = 'Û';
    entities['220'] = 'Ü';
    entities['221'] = 'Ý';
    entities['222'] = 'Þ';
    entities['223'] = 'ß';
    entities['224'] = 'à';
    entities['225'] = 'á';
    entities['226'] = 'â';
    entities['227'] = 'ã';
    entities['228'] = 'ä';
    entities['229'] = 'å';
    entities['230'] = 'æ';
    entities['231'] = 'ç';
    entities['232'] = 'è';
    entities['233'] = 'é';
    entities['234'] = 'ê';
    entities['235'] = 'ë';
    entities['236'] = 'ì';
    entities['237'] = 'í';
    entities['238'] = 'î';
    entities['239'] = 'ï';
    entities['240'] = 'ð';
    entities['241'] = 'ñ';
    entities['242'] = 'ò';
    entities['243'] = 'ó';
    entities['244'] = 'ô';
    entities['245'] = 'õ';
    entities['246'] = 'ö';
    entities['247'] = '÷';
    entities['248'] = 'ø';
    entities['249'] = 'ù';
    entities['250'] = 'ú';
    entities['251'] = 'û';
    entities['252'] = 'ü';
    entities['253'] = 'ý';
    entities['254'] = 'þ';
    entities['255'] = 'ÿ';
  }

  if (useQuoteStyle !== 'ENT_NOQUOTES') {
    entities['34'] = '"';
  }
  if (useQuoteStyle === 'ENT_QUOTES') {
    entities['39'] = ''';
  }
  entities['60'] = '<';
  entities['62'] = '>';


  // ascii decimals to real symbols
  for (decimal in entities) {
    if (entities.hasOwnProperty(decimal)) {
      hash_map[String.fromCharCode(decimal)] = entities[decimal];
    }
  }

  return hash_map;
}

//decode
function html_entity_decode (string, quote_style) {
    var hash_map = {},
    symbol = '',
    tmp_str = '',
    entity = '';
  tmp_str = string.toString();

  if (false === (hash_map = get_html_translation_table('HTML_ENTITIES', quote_style))) {
    return false;
  }

  delete(hash_map['&']);
  hash_map['&'] = '&';

  for (symbol in hash_map) {
    entity = hash_map[symbol];
    tmp_str = tmp_str.split(entity).join(symbol);
  }
  tmp_str = tmp_str.split(''').join("'");

  return tmp_str;
}

//Now Get your Content
var d = document.createElement("div");
d.innerHTML = $('#myDiv').html() ;
console.log(html_entity_decode (d.innerHTML));

This gives a result like the one below (which i guess is what you are looking for) :

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <mi>n</mi>
    <mo stretchy="false">=</mo>
    <mn>2</mn>
    </mrow>
</math>

- Some text here
> Some quote here

This is the working fiddle with all the relevant codes :

http://jsfiddle.net/Ddjag/1/

The trick here is to decode the text content as un escaped characters and that's what precisely, the function decode does.