HTMLソースの表示方法

Question

HTMLファイルのソースコードを表示させる方法として、javascriptを使った下記の方法で取得しました。
取得までは上手くいったのですが、document.writeを使用するとHTMLを認識してしまい。取得したWEBページそのままが表示されていしまいます。
こういった場合に、HTMLとしてではなく文字列として表示させる方法はありますか？

   var test = document.getElementById('main').innerHTML;
   document.write(test);

Comments

[退会済みユーザー]

https://teratail.com/questions/120654 ←解決済みでは？

[m.ts10806]

質問テンプレートに沿って前提や補足情報含めて一度書き直していただけると。これだけでは意味不明です。もし過去質問と連動性があるのならその旨も明記してください。

Answer 1

手っ取り早いのは、textContentを使うことでは。

テキストがHTMLとして解析されない

Node.textContent - Web API インターフェイス | MDN

Answer 2

https://developer.mozilla.org/ja/docs/Web/API/Fetch_APIを取得する例。

fetch('https://developer.mozilla.org/ja/docs/Web/API/Fetch_API')
.then(res => res.text())
.then(text => {
  document.body.textContent = new DOMParser().parseFromString(text, 'text/html').querySelector('h1').outerHTML;
});

Answer 3

var test = document.getElementById('main').innerHTML;
document.write("<pre>" + test + "</pre>");

これでもいいかと。

Comments

[退会済みユーザー]

ありがとうございます。
document.write("<pre>" + test + "</pre>");
を使用してもソースコードとして表示できませんでした。

[icegreen]

<をHTMLエンティティにエンコードしても表示できないでしょうか？
当方はそれで表示しています。

Answer 4

HTMLとしてではなく文字列として表示させる方法はありますか？

エスケープしてはいかがですか？（例えば、< を < に変換するなど）

具体的な方法は、javascript html encode などをキーワードにググると参考になる記事が多数ヒットするはずです。

Answer 5

<div id="main">
  <p>ここがこぴーされる</p>
</div>

var test = document.getElementById('main').innerHTML;
document.write('<textarea>'+test+'</textarea>');

難しいことをしないのであればコレでどうでしょうか