以纯文本形式获取元素内容与所有后代

Question

我对jQuery中的一些简单机制感到困惑。 让我们假设我有以下的div容器在我的网站：

<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> 

现在我想找回没有任何修改（！）的内容，让我自己的一些变化之后。

首次尝试

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

哦，所有子标签都没有了。那不是我想要的。

第二次尝试

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

嗯，这看起来更好。但仔细一看，最后一行的“>”现在也是HTML编码的。那不是我想要的。

问题

我怎样才能得到的DOM的元素内容的纯文本副本？

更新

从接受的答案

除了及其“转义文本”暗示我发现这nice little workaround using a <script>-Tag。

Answer 1

你需要挖掘一点，找出一些可能的解决方案。

例如，我挖了一堆，看到这三个线程，如THREAD1,THREAD2,THREAD3。

利用这些资源，我做了这样的事情：

//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)); 

这给像下面的一个结果（我猜是你在找什么）：

<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 

这是所有相关代码的工作小提琴：

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

这里的诀窍是将文本内容解码为un escaped个字符，这正是解码所执行的功能。

Answer 2

你正在依靠一个怪诞，>有时可以像你一样使用。 比较，例如，与<，您不能使用未转义。

我会说.html()的输出是你想要的。 在任何您希望输出值的上下文中，都希望确保纯文本字符被编码。

据我所知，一旦浏览器解析代码并构建DOM树，它就不会存储该树的原始表示。 特别是，它不存储原始可选语法块的任何位置，如存在/缺少可选引号字符或标记之间的空白量。