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

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

javascript encoding

JavaScript，目标：显示准确的源代码,javascript,encoding,html-entities,formatted-text,Javascript,Encoding,Html Entities,Formatted Text,目标是能够单击链接以打开一个新窗口，显示父窗口中的格式化源代码通过研究，我能够完成大部分任务，但我需要一个新窗口来显示源代码，就像在父窗口、缩进窗口和所有窗口中一样。目前，HTML实体显示为其显示对应项，因此它输出实际商标，而不是源的&trade 我想通过一堆实体循环并进行字符串替换，正如您在我的示例中所看到的，但我认为逻辑是错误的，我不知道发生了什么特别是实体：•bull，&；reg，™ 贸易，gt 这是我到目前为止发布的超级链接代码，对于任何能够在第二行中找出结束正文标记输出内容的

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

通过研究，我能够完成大部分任务，但我需要一个新窗口来显示源代码，就像在父窗口、缩进窗口和所有窗口中一样。目前，HTML实体显示为其显示对应项，因此它输出实际商标，而不是源的&trade

我想通过一堆实体循环并进行字符串替换，正如您在我的示例中所看到的，但我认为逻辑是错误的，我不知道发生了什么

特别是实体：•bull，&；reg，™ 贸易，gt

这是我到目前为止发布的超级链接代码，对于任何能够在第二行中找出结束正文标记输出内容的人来说，这是一个额外的奖励，我被难住了：

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

更新尚未解决的谜团：

我尝试了使用AJAX请求的建议，但仍然会产生相同的结果，第11行显示新实体“您没有正确地转义源代码。您应该使用源代码的文本表示构建DOM元素

使用jQuery：

[tab]
</body>

</html>

所以，感谢所有方向的@SLaks。我能够实现接近我想要的，但仍然有一些小怪癖，我可能不得不接受。我特别尝试避免使用任何库，比如jQuery

仍在讨论的问题如下： -输出源显示的是无最后斜杠的自动关闭标记。因此，例如，显示为。 -出于某种原因，正在将结束正文标记包装到下面的行。它应该呈现为：

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( );
    }
}

但是，它呈现为：

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

您想要当前的DOM源还是服务器的原始源？我猜是当前的DOM源。这是一个直接的HTML页面，因此没有呈现服务器端代码，也没有可用的解决方案。DOM源代码不区分实体及其字符。嗯，我可能有点困惑。例如，在上面代码的第11行，如果我通过上下文菜单查看一个实际的源代码，它会像上面那样显示。这个JavaScriput输出窗口将其显示为新实体的视图源，显示来自服务器的原始源，而不是DOM的当前状态。如果你想要，你可以使用AJAX。为什么使用jQuery而不使用sane DOM？@Zirak:因为我太懒了，无法查找textContent和innerText。然后创建一个新的文本节点并将其添加到元素中。你是对的；我没想到。但是，jQuery仍然较短。请随意添加一个答案，因为所有女士都知道，尺寸并不重要——性能和清晰度是女士现在可能已经知道的后者。但我不会重复你的答案，我用我的小眼睛在你的循环中发现了一个隐式全局变量I

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

    </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( );
    }
}