body に書かれた内容をそのまま取得したい

###前提・実現したいこと

body に書かれた内容を、javascript でそのまま取得したいです。

###発生している問題・エラーメッセージ

何パターンか試してみたのですが、<= が <= に変換されてしまう ケースなどがありました。
できればまったくそのままの形で取得したいのですが…

###試したこと

jQuery を使用して $("body").html()
document.body.innerHTML
document.body.childNodes を回してみる

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
5<script>
6  $(function() {
7    console.clear();
8
9    //========================================
10    // jQuery で取ってみる
11    // ⇒ <= が &lt;= になる
12    //========================================
13    var jq = $("body").html();
14
15    console.log("=== jq ====================");
16    console.log(jq);
17
18    //========================================
19    // 標準 javascript で取ってみる
20    // ⇒ <= が &lt;= になる
21    //========================================
22    var js = document.body.innerHTML;
23
24    console.log("=== pure js ====================");
25    console.log(js);
26
27    //========================================
28    // childNodes から取ってみる
29    // ⇒ 逆に &lt;= が <= になる
30    //========================================
31    var str = "";
32    for (var i = 0, imax = document.body.childNodes.length-1; i <= imax; i++) {
33        var childNode = document.body.childNodes[i];
34        str += (childNode.nodeValue || childNode.outerHTML);
35    }
36
37    console.log("=== childNodes ====================");
38    console.log(str);
39  });
40</script>
41</head>
42<body>
43  小なりが変換されてしまう。そのまま取りたい。
44  タグは変換されないのに
45
46  <div>あいう</div>
47  
48  <ul>
49    <li>test</li>
50  </ul>
51
52  ```
53  if (list.length <= 0) ...
54  ```
55
56  if (list.length <= 0) ...
57
58  &lt;=
59
60</body>
61</html>

###補足情報(言語/FW/ツール等のバージョンなど)

とりあえず Windows10 : IE11 と Chrome で動けば良いかなと思っています。
jQuery のバージョン等に指定はないです。

###その他

そもそも何でそんなことをしたいのか
⇒ 「body にマークダウンでドキュメントを記述」して、
「marked.js というライブラリで変換して再設定」としようとしたところ、

意図しない変換がかかっている部分があったという経緯です。

（marked.js はマークダウンで書いたものを HTML タグに変換してくれるライブラリ）

$("body").html() が <= を < で返しており、
marked.js は < をさらに < に変換しているようなので、
最終的にブラウザ上で比較式が <= と表示されてしまっています。

その為、<= ではなく <= の状態で marked.js に渡せないものかと考えています。

マークダウンは別ファイルで記述して、それを読み込む… としない理由
⇒ 一応ローカルでも動かせると良いなあと思った為です。
別ファイルにして～の読み込み～だとローカルで動かないので
（ブラウザの設定をいじれば動くのは知ってるんですけど…）

*.md で書かないで marked.js を使う理由
⇒ どうしても無理なら仕方ないのですが、可能であればビューアーのインストール等をせずに、
ブラウザでぺろっと見られると良いなと思いました。

追記：この辺 ↓ とかの関係ですかね… そのまんまは取れないのでしょうか

innerHTML や jQuery.html() は HTMLをそのまま取得できるわけではない
http://jmblog.jp/archives/876

何かお分かりになる方がいらっしゃいましたらよろしくお願いします。

行動規範の内容に同意します

回答3件

ちょっと状況がわからないのですが
以下サンプルだと普通に表示されますね

HTML
1<html>
2<head>
3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
4<script>
5$(function(){
6  $('[type=button]').on('click',function(){
7    alert($('body').html());
8  });
9}); 
10</script>
11</head>
12<body>
13<script>
14if(1<=2) console.log(3);
15</script>
16<input type="button" value="hoge">
17</body>
18</html>

投稿2016/12/21 09:25

yambejp

総合スコア114757

sk_3122

2016/12/21 10:01 編集

ありがとうございます。頂いたサンプルだと、確かに <= のままで表示されました。 <script> の中だと変換されないようです？ if(1<=2) console.log(3); の上下の <script> タグを削除すると、やはり <= となってしまいました。

行動規範の内容に同意します

ベストアンサー

で挟んどいて innerHTML で取得して CDATA 部分を取り除くとか。

私は marked.js では textarea.val() で取得したのを入れてました。

投稿2016/12/21 13:11

退会済みユーザー

総合スコア0

退会済みユーザー

2016/12/21 13:17

ちなみに関係ないですが marked(str, breaks: true) とすると Github wiki 風の自動改行になります。

sk_3122

2016/12/22 01:16

ありがとうございます！  で挟むと本当にそのままのものが取れました！たとえば <p><div>あいう</div></p> のような間違ったマークアップでもそのままの文字列で取れました。 # $("body").html() だとブラウザが解釈したものが返ってくるので # 上記の書き方だと <p></p><div>あいう</div><p></p> とかになるありがとうございます。

行動規範の内容に同意します

HTML で < は < と書くのが正しくて、そうなってないところをブラウザが自動で修正してくれてるわけですから、 < になってるべきです
HTML 要素がいらなくてテキストが欲しいなら .text() でとれます
.text() で困るなら .html().replace(/</g, "<") のように置換するしかないと思います

投稿2016/12/21 11:22

lazex

総合スコア604

sk_3122

2016/12/22 01:17

> HTML で < は < と書くのが正しくて、そうなってないところをブラウザが自動で修正してくれてるわけですから、 < になってるべきですああーそうですよね、結局のところ「テキスト」ではなくてあくまで「HTML」ですもんね。そもそも「書いてある文字をそのまま」みたいな使い方をするものではないということですよね… 確かに…  で囲むか replace するか、どちらかにしようと思っています。 # 文中に  が登場したら… とか言い出すとキリがないですが、それを考えるなら replace # ただし HTML 的に正しくないマークアップがもしあったら直されてしまうので、そちらを優先させるなら  ですかね… ありがとうございます。

行動規範の内容に同意します

あなたの回答