Question

我正在用javascript编写自己的语法高亮显示器以获得乐趣并看到几种方法，但它们都有专业知识和一些非常严重的缺点，我无法解决。你们对这些方法有什么看法？我有什么更好的方法吗？

假设

要突出显示的代码存在于单个字符串中。

接近

以其字符串形式处理代码并使用正则表达式查找模式   的优点
  简单定义和搜索模式
  的缺点
  很难忽略引号或评论中的关键字



按空格和换行符拆分字符串并循环遍历数组   的优点
  易于跟踪范围
  的缺点
  分割后很难跟踪空格和换行符

编辑： 词汇分析
所以，如果我理解它，使用词法分析将字符串分解为标记。这听起来很像2号方法？你如何将令牌重新组装成原始字符串？

Answer 1

注意：这使用jQuery。如果你愿意的话，可以使用直接的javascript重写它。

我实际上写了一个有趣的小插件：

(function($) {
 $.fn.codeBlock = function(blockComment) {

  // Setup keyword regex
   var keywords = /(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|try|typeof|var|void|volatile|while|with|true|false|prototype)(?!\w|=)/gi;

  // Booleans to toggle comment, regex, quote exclusions
   var comment = false;
   var quote = false;
   var regex = false;

  /*  Array used to store values of regular expressions, quotes, etc.
   so they can be used to ID locations to be skipped durring keyword
   regexing.
  */
   var locator = new Array();
   var locatorIndex = 0;

   if (blockComment) locator[locatorIndex++] = 0;

  var text = $(this).html();
  var continuation;
  var numerals = /[0-9]/;

  var arr = ($(this).html()).split("");
  var outhtml = "";

  for (key in arr) {
   // Assign three variables common 'lookup' values for faster aquisition
    var keyd = key;
    var val = arr[keyd];
    var nVal = arr[keyd - 1];
    var pVal = arr[++keyd];

   if ((val == "\"" || val == "'") && nVal != "\\") {
    if (quote == false) {
     quote = true;
     outhtml += val;
    }
    else {
     outhtml += val;
     quote = false;
    }
    locator[locatorIndex++] = parseInt(key);
   }
   else if (numerals.test(val) && quote == false && blockComment == false && regex == false) {
    outhtml += '<span class="num">' + val + '</span>';
   }
   else if (val == "/" && nVal != "<") {
    var keys = key;
    if (pVal == "/") {
     comment = true;
     continuation = key;
     break;
    }
    else if (pVal == "*") {
     outhtml += "/";
     blockComment = true;
     locator[locatorIndex++] = parseInt(key);
    }
    else if (nVal == "*") {
     outhtml += "/";
     blockComment = false;
     locator[locatorIndex++] = parseInt(key);
    }
    else if (pVal == "[" && regex == false) {
     outhtml += "<span class='res'>/";
     regex = true;
    }
    else {
     outhtml += "/";
    }
   }
   else if (val == "," || val == ";" && regex == true) {
    outhtml += "</span>" + val;
    regex = false;
   }
   else {
    outhtml += val;
   }
  }

  if (comment == true) {
   outhtml = outhtml.replace(keywords, "<span class='res'>$1</span>");
   outhtml += '<span class="com">';
   outhtml += text.substring(continuation, text.length);
   outhtml += '</span>';
  }
  else {
   if ((locator.length % 2) != 0) locator[locator.length] = (text.length - 1);

   if (locator.length != 0) {
    text = outhtml;

    outhtml  = text.substring(0, locator[0]).replace(keywords, "<span class=\"res\">$1</span>");

    for (var i = 0; i < locator.length;) {
     qTest = text.substring(locator[i], locator[i] + 1);
     if (qTest == "'" || qTest == "\"") outhtml += "<span class=\"quo\">";
     else outhtml += "<span class=\"com\">";

     outhtml += text.substring(locator[i], locator[++i] + 1) + "</span>";

     outhtml += text.substring(locator[i] + 1, locator[++i]).replace(keywords, "<span class=\"res\">$1</span>");
    }
   }
   else {
    outhtml = outhtml.replace(keywords, "<span class=\"res\">$1</span>");
   }
  }

  text = outhtml;
  $(this).html(text);
  return blockComment;
 }
})(jQuery);

我不会声称它是最有效的方式来做到这一点或最好但它确实有效。还有可能还有一些我还没有ID的错误（我知道但我还没知道，但是这应该会让你知道你可能如果你愿意的话就去做吧。

我建议的实现是创建一个textarea或者什么东西，当你点击一个按钮或某个东西时运行插件（就测试来说这是一个不错的主意）当然你可以设置textarea中的文本到一些起始代码以确保它有效（提示：您可以将标记放在<textarea>标记之间，它将呈现为文本，而不是HTML。）

另外，blockComment是一个布尔值，请确保传递false，因为true将触发块引用。如果您决定逐行解析某些内容，例如：

<a>code</a>
<a>some more code</a>

做类似的事情：

blockComment = false;
$("a").each(function() {
  blockComment = $(this).codeBlock(blockComment);
});

语法高亮设计

1 个答案: