Question

目标是能够点击链接以显示一个新窗口，显示父窗口中的格式化源代码。

通过研究，我能够完成大部分任务，但是我需要新窗口来显示源代码完全，因为它在父，缩进和所有内容中。目前，HTML实体正在显示为其显示对应物（因此它输出实际商标而不是源™）。

我正在考虑循环遍历一堆实体并进行字符串替换，正如您在我的示例中所看到的，但我认为逻辑已关闭，我不知道发生了什么。< / p>

特别是实体：•（公牛），＆amp; （amp），®（reg），TM（贸易），＆lt; （lt），＆gt; （GT）

这是我到目前为止启动的超链接的代码，对任何能够弄清楚在第二行输出结束体标记的人都有好处（我很难过）：

非常感谢您提出解决方案的任何方向。

function viewSource( e )
{
    e.preventDefault( );

    var source = '<!DOCTYPE html>' + "\n"
               + '<html xmlns="http://www.w3.org/1999/xhtml">' + "\n\n"
               + "\t" + document.getElementsByTagName( 'html' )[0].innerHTML + "\n\n"
               + '</html>';

    entities = [
        new Entity( '<', '&lt;' ),
        new Entity( '>', '&gt;' )
    ];

    for ( var i = 0; i < entities.length; i++ )
    {
        var regex = new RegExp( entities[i].entity, 'g' );
        source = source.replace( regex, entities[i].html );
    }

    source = '<pre>' + source + '</pre>';

    var sourceWindow = window.open( '', '_blank' );
    sourceWindow.document.write( source );
    sourceWindow.document.close( );

    if ( window.focus )
    {
        sourceWindow.focus( );
    }
}

更新（尚未解决的谜团）：

我尝试了使用AJAX请求的建议，但它仍然产生相同的结果（第11行显示new Entity( '<', '<'),）。这是AJAX尝试的样子：

function viewSource( e )
{
    e.preventDefault( );

    var xmlhttp;

    if ( window.XMLHttpRequest )
    {
        // IE7+, Fx, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest( );
    }
    else
    {
        // IE6, IE5
        xmlhttp = new ActiveXObject( 'Microsoft.XMLHTTP' );
    }

    xmlhttp.onreadystatechange = 
        function ( )
        {
            if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
            {
                var source = xmlhttp.responseText.replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
                source = '<pre>' + source + '</pre>';

                var sourceWindow = window.open( '', '_blank' );
                sourceWindow.document.write( source );
                sourceWindow.document.close( );

                if ( window.focus )
                {
                    sourceWindow.focus( );
                }
            }
        };

    xmlhttp.open( 'GET', '/', true );
    xmlhttp.send( );
}

Answer 1

您没有正确逃离您的来源您应该使用源的 text 表示构建DOM元素。

使用jQuery：

$('<pre />').text(source).appendTo(document.body);

Answer 2

所以，感谢@SLaks的所有方向。我能够达到我想要的 close ，但仍然有一些我可能不得不忍受的小怪癖。我特意试图避免使用任何库，例如jQuery。

仍在发生的问题如下： - 输出源显示自动关闭标签，没有最终斜杠。因此，例如，<br />显示为<br>。 - 由于某种原因，关闭的身体标签被包裹在下面的线上。它应该呈现为：

    </body>

</html>

但是，它呈现为：

[tab]
</body>

</html>

尽管如此，我仍然对结果感到满意，这应该足够了。但是，如果任何人有任何更好的解决方案，不需要第三方库，那将非常感激。这是最新的尝试：

function htmlEntity( character )
{
    switch ( character.charCodeAt( 0 ) )
    {
        case 174:  return '&reg;';    break;
        case 233:  return '&eacute;'; break;
        case 8211: return '&ndash;';  break;
        case 8220: return '&ldquo;';  break;
        case 8221: return '&rdquo;';  break;
        case 8226: return '&bull;';   break;
        case 8482: return '&trade;';  break;
        default:   return character;
    }

    if ( character.charCodeAt( 0 ) > 127 )
    {
        return '&#' + character.charCodeAt( 0 ) + ';';
    }

    return character;
}

function viewSource( e )
{
    e.preventDefault( );

    var source = '<!DOCTYPE html>' + "\n"
               + '<html xmlns="http://www.w3.org/1999/xhtml">' + "\n\n"
               + "\t" + document.getElementsByTagName( 'html' )[0].innerHTML + "\n\n"
               + '</html>';

    var entities = [ '®' ];
    for ( i = 0; i < entities.length; i++ )
    {
        source.replace( entities[i], htmlEntity( entities[i] ) );
    }

    var temp = '';
    for ( i = 0; i < source.length; i++ )
    {
        temp += htmlEntity( source.charAt( i ) );
    }

    var pre = document.createElement( 'pre' );
    pre.textContent = temp;

    source = '<pre>' + pre.innerHTML + '</pre>';

    var sourceWindow = window.open( '', '_blank' );
    sourceWindow.document.write( source );
    sourceWindow.document.close( );

    if ( window.focus )
    {
        sourceWindow.focus( );
    }
}

JavaScript，目标：显示准确的源代码

2 个答案: