基于正则表达式的JavaScript/C++语法高亮(js版)

最新推荐文章于 2023-07-31 18:35:15 发布

置顶

Wind__Fantasy

最新推荐文章于 2023-07-31 18:35:15 发布

阅读量3.7k

点赞数 2

分类专栏： JavaScript 文章标签：正则表达式 function string character javascript div

本文链接：https://blog.csdn.net/Wind__Fantasy/article/details/6906767

版权

文章介绍了如何使用正则表达式在JavaScript中实现语法高亮，特别是针对JavaScript和C++代码的高亮处理。作者受到其他程序员的启发，决定创建自己的高亮方法，并指出当前流行的syntaxhighlighter在高亮正则和数字方面存在不足。文章提供了一个简单的JavaScript高亮示例，并鼓励读者具备一定的正则表达式基础来理解源码。

摘要由CSDN通过智能技术生成

JavaScript的语法高亮一直是个难点，因为需要语义分析以确定/是除法操作的开始还是正则表达式的开始。目前关于高亮js的语法高亮都不是很理想，尤其是syntaxhighlighter(你待会看到的代码高亮效果就是它弄的, csdn说, 就用sh了)的效果算是最差的了，根本就不高亮正则、数字等，太不敬业了。假设你写的代码是足够规范的，而且不考虑效率的话，那么你使用我这个高亮js一般不会有问题。

语法高亮最初我是想做但感觉很难，但前阵子偶然看到一个很牛的女程序员Ider(博客地址Ider)，绝对很牛，写了一个C++的语法高亮Regular Expression for C++ Code Syntax Coloring (Version 1.0)，我按耐不住了，决心也要写一个。

关于更多的高亮javascript的，请访问Ben Joffe(悉尼的绝绝对对大牛)的JavaScript Syntax Highlighter，这个估计是目前最好的高亮js的，当然最好的高亮js的应该属aptana和netbeans了(但它们都不适用于网页)

以下是一个Hack SH的js高亮示例:

var re = /'abc/g, str = 'str'; // I can't imagine this will DO highlight well

效果图:

js的

C++的

以下是源码(前面说过SH高亮很烂，所以这儿没用高亮，把下面的源码复制到文本编辑器中然后保存为utf8编码的html后用浏览器(推荐opera或chrome浏览器)可以打开测试了，当然不用utf8也不要紧，我没有使用utf8字符，呵呵)，你需要一定的正则表达式基础来读懂以下源码，希望哪天我能有时间解释下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Highlight Code Version 2.0(2011-10-20)</title>
    <style type="text/css">
      * { padding: 0; margin: 0; }
      #main { width: 800px; margin: auto; }
      #code { font-size: 0.8em; padding: 0.2em 0; }
      #codesettings { border: 1px dotted #888; margin: 0.4em 0; padding: 0.1em 0; }
      #codesettings label { display: block; text-indent: 0.2em; }
      #codesettings input { width: 2em; }
      #settingstitle { font-size: 1.1em; font-weight: bold; }
      #code textarea { width: 100%; height: 200px; }
      #presentation { line-height: 1.2em; font-size: 0.8em; font-family:monospace; width: 800px; } /* fix IE6, making lineno and code of the same height */
      #lineno { float: left; width: 60px; text-align: right; color: #990033; background-color: #cccccc; }
      #highlightcode { float: left; width: 734px; margin-left: 6px; white-space: nowrap; overflow-x: auto; }

      /* custom code style class defined here */
      /* add each language style className with the RELATED option value as prefix in [Select a Programing Language] select list */

      /* for C/C++ */
      .cppstring { color:#ff0000; }
      .cppcomment { color:#008800; }
      .cppcharacter { color:#ff00cc; }
      .cpppreprocessor { color:#006666; }
      .cppidentifier { color:#0000ff; }
      .cppkeyword { color:#ff3300; font-weight:bold; }
      .cppnumber { color:#990099; }
      .cppoperator { color:#000066; }
      .cppuserhighlight { color:#0099ff; }

      /* for JavaScript */
      .jsstring_dq { color:#ff0000; }
      .jscomment { color:#008800; }
      .jsstring_sq { color:#ff00cc; }
      .jsidentifier { color:#0000ff; }
      .jskeyword { color:#ff3300; font-weight:bold; }
      .jsnumber { color:#990099; }
      .jsoperator { color:#000066; }
      .jsuserhighlight { color:#0099ff; }
      .jsregexp { color: #fe5677; }
      .jsloprand { color: #000000; }

      /* TODO: other language css style adds here */
    </style>
</head>
<body>
    <div id="main">
      <br />
      <div style="font-size:0.9em;"><strong><em>A simple highlight (JavaScript/C/C++) code parser based on regular expression, works fine with IE6 and the latest FF/Chrome/Opera(<span style="color:green; font-size:0.9em;">have a small align bug in Safari between lineno and highlight code</span>), hope you can enjoy, designed by Wind Fantasy © 2011-10-20</em></strong></div>
      <div style="overflow-x: hidden;"> ----------------------------------------------------------------------------------------------------------------------------- </div>
      <div style="color: #008800; font-size: 0.8em;">Version 2.0: Now I have partly fixed the <em>JavaScript Highlight bug</em> by supposing that '/' stands for division only if '/' follows <strong style="color: #ff0000;">({number}|{identifier}|[\)\]}])[ \t]*</strong> directly, as we know that '/' needs a left operand for division</div>
      <div style="font-size: 0.8em;">Please visit <a href="http://www.benjoffe.com/code/projects/syntax/" target="_blank">JavaScript Syntax Highlighter</a> for more information about JavaScript Highlight.</div>
      <br />
      <div id="code">
        <div id="action">
          <button id="hidecodesettings" type="button">Hide Code Settings</button>
           <button id="highlight" type="button">Highlight Textarea Code</button>
           <button id="testjsself" type="button">Highlight JavaScript Of Current Document</button>
        </div>
        <form autocomplete="off">
          <div id="codesettings">
            <div id="settingstitle">Code Settings</div>
            <label>Select a Programing Language:
              <select id="language">
                <option value="cpp">C/C++</option>
                <option value="js">JavaScript</option>
              </select>
            </label>
            <label>Select Formatting Method:
              <select id="formattingmethod">
                <option value="pre">Use Pre Tag (Fast)</option>
                <option value="entity">Use HTML Entity (Slow)</option>
              </select>
            </la