5

Javascript の実装を開始したので、トラブルシューティングを行う必要があり、HTML をレンダリングせずに画面に出力したいと考えています。要素に（IEで）アクセスできます

document.getElementById("test").outerHTML

と思いますが、確かなことを証明することはできません。

では、 document.writeにタグを含む要素全体を表示させるにはどうすればよいでしょうか?

4

6 に答える 6

12

<b>Hello</b>たとえば、代わりにリテラルが必要ですHelloか？

その場合は、簡単に実行してください。

myHTML = myHTML.replace(/[<>&\n]/g, function(x) {
    return {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
       '\n': '<br />'
    }[x];
});

出力前です。たとえば、空白を文字通り出力したい場合など、これを他の多くの文字に適用できます。

于 2011-06-02T22:25:30.667 に答える
9

2 つのことを行います (1 つだけではなく、これらすべて)。

  1. HTML マークアップをエンティティに置き換える:HTML.replace(/&/g, '&amp;').replace(/</g, '&lt;')で十分です。
  2. <pre></pre>空白が削除されず、等幅フォントで表示されるようにタグで囲みます。

することもできますalert(HTML)。Windows 上の IE では (少なくとも) Ctrl-C を押して、ダイアログ ボックスのテキストの内容を別の場所に貼り付けて、わかりやすく表示することができます。

の 2 番目の引数として関数を使用するよりも、2 つのシリアル置換の方が高速ですreplace()。完全な HTML ドキュメントから予想されるように文字列が非常に長い場合、3 つのシリアル置換も高速です。

また、使用document.writeはおそらく最良の方法ではありません。id を持つ div がある場合は、次のoutput方法でアクセスできます。

document.getElementById('output').innerHTML = '<pre>' + document.body.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre>';

上記のコードは動作します。私は IE と Firefox で FireBug を使用してテストしました。outerHTMLFirefox ではサポートされていないことに注意してください。

于 2011-06-02T22:25:45.867 に答える
2

JavaScript を使い始めている場合は、信頼性の低いプロパティに触れないようにするには、今が最適な時期です。outerHTML はその 1 つです。IE、Chrome、Opera ではサポートされていますが、Firefox ではサポートされていません。

元のコードを取得すると、これは機能します。

var content = document.getElementById("test").outerHTML;
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
docuemnt.write(safe);

しかし、「outerHTML」を使用することが悪い考えであるのと同様に、「document.write()」も悪い考えです。「document.write() が呼び出されたときにコードがどこにあるか」よりも、ページに id を持つ div を配置し、そこにテキストを設定する方がはるかに優れています。

<html>
  <head>...</head>
  <body>
    ...
    <div id="mylog"></div>
    ...
 <body>
</html>

そして、次のいずれかを入力します。

// set the content for div 'mylog'
document.getElementById("mylog").innerHTML = content;

または、jQuery のようなものを使用することで、サポートされているかどうかわからないクレイジーなものをすべて隠し、呼び出した場合に動作することを保証する API を提供します。

// get html content
var content = $("#test").html();
// make it print safe
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
// add it to the log as text
$("mylog").append(safe);
于 2011-06-02T22:35:06.407 に答える
1

問題が IE に限定されない場合は、firefox を使用し、firebug を使用してください。console.logは非常に便利です。いつでも使用できますalert(myString)が、すぐに非常に煩わしくなります。

于 2011-06-02T22:31:21.773 に答える
1

これがテスト用であり、すぐにブルート フォースしたい場合は、文字列内のすべての文字を &#x; に変換できます。同等：

var a = "<div>hello</div>";

var b = a.replace(/./g, function(e){
    return "&#"+e.charCodeAt(0)+";";
});

document.write(b);

実際の例: http://jsfiddle.net/J89w/

于 2011-06-02T22:50:42.840 に答える