javascript - 将元素内容作为纯文本获取所有后代

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

这是所有相关代码的工作 fiddle :

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

这里的技巧是将文本内容解码为未转义字符，而这正是函数 decode 所做的。