javascript - すべての子孫を含むプレーン テキストとして要素のコンテンツを取得する

Question

jQuery のいくつかの単純なメカニズムについて混乱しています。Web サイトに次の div コンテナーがあるとします。

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

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

ここで、変更なしでコンテンツを取得し (!!!)、後で独自の変更を加えたいと考えています。

最初の試み

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

ああ、すべての子タグがなくなっています。それは私が欲しいものではありません。

2 回目の試行

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

まあ、それはより良く見えます。しかし、よく見ると、最後の行の ">" も HTML エンコードされていることがわかります。それは私が欲しいものではありません。

質問

DOM 要素のコンテンツのプレーン テキスト コピーを取得するにはどうすればよいですか?

アップデート

受け入れられた回答と「エスケープされていないテキスト」のヒントは別として、 <script>-Tag を使用してこの素敵な小さな回避策を見つけました。

Answer 1

考えられる解決策を見つけるには、少し掘り下げる必要があります。

たとえば、スタックを掘り下げて、 THREAD1 、 THREAD2 、 THREAD3 などの3つのスレッドを見ました。

これらのリソースを使用して、次のようなものを作成しました。

//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文字としてデコードすることです。まさにそれが、decode 関数が行うことです。

Answer 2

>あなたは時々あなたのように使うことができる癖に頼っています. たとえば、<エスケープせずに使用できない と比較してください。

の出力は.html()あなたが望むものだと思います。値を出力するコンテキストでは、プレーン テキスト文字がエンコードされていることを確認する必要があります。

私の知る限り、ブラウザがコードを解析して DOM ツリーを構築すると、そのツリーの元の表現は保存されません。特に、オプションの引用符の存在/欠落やタグ間の空白の量など、元のオプションの構文チャンクはどこにも格納されません。