jQuery 显示页面源代码

如果你的网站是有关编程教程的，那么你一定常常要在页面显示源代码，特别是在那些演示页面。虽然用户可以通过右键点击查看页面源代码（大部分浏览器都有这个功能），但是这不如直接在页面上点击一个链接，然后在同一个页面上显示代码来的简单方便。下面就要介绍如何使用jQuery来实现这个功能。

首先我们要个显示代码的链接，并且给这个链接加上一个class，这样就可以让显示代码功能只有在这一类的链接上有效。

1. 链接代码：

<a href="showSource.js" class="seeCode">查看代码</a>
<!--注意:
这里的href是指你要查看的源代码的文件名。
如果是当前页，你可以用href=“#” 更正（2009/1/20)：用‘#’的方法在IE下行不通。
-->

2. Javascript代码：

<script type="text/javascript">
  $( document ) . ready ( 
  function() {
    $('a.seeCode').each (
      function( i ) {
        $( this ).after( '<pre class="seeCode"></pre></div>' );
      }
    )
    $( 'pre.seeCode' ).hide();
    $('a.seeCode').toggle ( 
      function() {
    if( !this.old ){
      this.old = $(this).html();
    }
        $(this).html('隐藏代码');
        parseCode(this);
      },
      function() {
        $(this).html(this.old);
        $(this.nextSibling).hide();
      }
    )
    function parseCode(o){
      if(!o.nextSibling.hascode){
          $.get (o.href, //注意：这里用到ajax - .get()
            function(code){
              code=code.replace(/&/mg,'&#38;');
              code=code.replace(/</mg,'&#60;');
              code=code.replace(/>/mg,'&#62;');
              code=code.replace(/\"/mg,'&#34;');
              code=code.replace(/\t/g,'  ');
              code=code.replace(/\r?\n/g,'<br>');
              code=code.replace(/<br><br>/g,'<br>');
              code=code.replace(/ /g,'&nbsp;');
              o.nextSibling.innerHTML=code;
              o.nextSibling.hascode=true;
            }
          );
      }
      $(o.nextSibling).show();
    }
  }
)
</script>

注意：上述代码用到ajax 的.get()方法,通过给定的代码href，得到代码运行的结果。这种方法可以直接显示css、javascript、html等静态的代码。但是不能显示的动态代码，例如：php文件，用这种方法得到的实际上是php运行的结果。我会在以后的文章里介绍如何显示php文件。

另外，从上述代码里我们还可以看到，代码会被显示在“seeCode”class的链接下，并且被放在<pre>标签里，所以我们有必要给<pre>加上css样式，这样显示的代码就比较容易和页面的其他内容区分开来。

3. CSS代码：

pre {
  padding: 5px;
  color: #000;
  background-color: #DDD;
  border: 1px solid #CCC;
  line-height: 1.1em;
  overflow: auto;
}

演示：1. 显示HTML  2.显示php代码运行结果