dp.SyntaxHighlighter代码分析

文章截图 - 更好的排版
源代码下载

dp.SyntaxHighlighter代码分析

dp.SyntaxHighlighter作为一个最常用的JavaScript代码高亮工具受到广泛的欢迎。
那么你有没有想知道它的内部实现机制是什么，本文在对其分析后，抽取核心代码以重现其功能。
注：本文中的代码高亮使用的就是手工打造的dp.SyntaxHighlighter的简化版。

核心思想
1. 首先定义了一系列的正则表达式用来匹配所有的高亮代码，包括关键字、单行注释、多行注释、字符串， 如果你仔细观察高亮后的JavaScript代码，你会发现也只有这些代码被高亮显示了，是不是很简单。

var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
'default delete do double else enum export extends false final finally float ' +
'for function goto if implements import in instanceof int interface long native ' +
'new null package private protected public return short static super switch ' +
'synchronized this throw throws transient true try typeof var void volatile while with';
var regexList = [{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'gm'), css: 'comment' },
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' },
{ regex: new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"', 'g'), css: 'string' },
{ regex: new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'", 'g'), css: 'string' },
{ regex: new RegExp(getKeywords(keywords), 'gm'), css: 'keyword'}];
function getKeywords(str) {
return '\\b' + str.replace(/ /g, '\\b|\\b') + '\\b';
}

2. 接下来我们需要通过JavaScript中的正则匹配来找到所有的匹配项。

for (var i = 0; i < regexList.length; i++) {
var match = null;
while ((match = regexList[i].regex.exec(source)) != null) {
matchs.push({
value: match[0],
index: match.index,
length: match[0].length,
css: regexList[i].css
});
}
}

3. 然后对匹配项进行排序（按照其在原始代码中的顺序）

function sortCallback(m1, m2) {
if (m1.index < m2.index)
return -1;
else if (m1.index > m2.index)
return 1;
else {
return 0;
}
}
matchs = matchs.sort(sortCallback);

4. 最后拿着这些排好顺序的匹配项，和原始代码进行整合就好了。

注意事项

在拿到排序后的匹配项列表后，还不能和原始代码整合，因为其中有重复项，比如：

var keywords = 'abstract boolean break';

会找到如下匹配项：var,'abstract boolean break',abstract,boolean,break这五个匹配项，其中一个字符串，四个关键词。
对于这样的情况，我们还必须起初重复的匹配项。

function isInlcude(matchs, index) {
var match = matchs[index];
for (var i = index - 1; i >= 0; i--) {
if (matchs[i]) {
if (match.index > matchs[i].index && match.index < matchs[i].index + matchs[i].length) {
return true;
}
}
}
return false;
}
for (var i = 0; i < matchs.length; i++) {
if (isInlcude(matchs, i)) {
matchs[i] = null;
}
}

修改后的源代码

这里只处理JavaScript的情况，对于其他语言的代码，只需要定义不同的正则匹配表达式就行了。

function hightLight(source) {
var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
'default delete do double else enum export extends false final finally float ' +
'for function goto if implements import in instanceof int interface long native ' +
'new null package private protected public return short static super switch ' +
'synchronized this throw throws transient true try typeof var void volatile while with';
var regexList = [{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'gm'), css: 'comment' },
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' },
{ regex: new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"', 'g'), css: 'string' },
{ regex: new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'", 'g'), css: 'string' },
{ regex: new RegExp(getKeywords(keywords), 'gm'), css: 'keyword'}];
var matchs = [], result = [];
function getKeywords(str) {
return '\\b' + str.replace(/ /g, '\\b|\\b') + '\\b';
}
function sortCallback(m1, m2) {
if (m1.index < m2.index)
return -1;
else if (m1.index > m2.index)
return 1;
else {
return 0;
}
}
function isInlcude(matchs, index) {
var match = matchs[index];
for (var i = index - 1; i >= 0; i--) {
if (matchs[i]) {
if (match.index > matchs[i].index && match.index < matchs[i].index + matchs[i].length) {
return true;
}
}
}
return false;
}
function convertSpace(str) {
return str.replace(/\t/g, "    ").replace(/ /g, " ");
}
for (var i = 0; i < regexList.length; i++) {
var match = null;
while ((match = regexList[i].regex.exec(source)) != null) {
matchs.push({
value: match[0],
index: match.index,
length: match[0].length,
css: regexList[i].css
});
}
}if (matchs.length) {
matchs = matchs.sort(sortCallback);
// 去除重复
for (var i = 0; i < matchs.length; i++) {
if (isInlcude(matchs, i)) {
matchs[i] = null;
}
}
var i = 0;
for (var j = 0; j < matchs.length; j++) {
var match = matchs[j];
if (match) {
if (match.index > i) {
result.push('<span>' + convertSpace(source.substr(i, match.index - i)) + '</span>');
}
result.push('<span class="' + match.css + '">' + convertSpace(match.value) + '</span>');
i = match.index + match.length;
}
}
if (i != source.length - 1) {
result.push(convertSpace(source.substr(i)));
}
}
var resultLines = result.join("").split("\n");
var out = [], alt = false;
out.push('<div class="dp-highlighter"><ol start="1" class="dp-c">');
for (var i = 0; i < resultLines.length; i++) {
out.push(alt ? '<li class="alt">' : '<li>');
out.push('<span>');
out.push(resultLines[i] === "" ? " " : resultLines[i]);
out.push('</span>');
out.push('</li>');
alt = !alt;
}
out.push('</ol></div>');
return out.join("");
}
$(function() {
$("pre.js").each(function() {
var $this = $(this);
$this.hide().after(hightLight($this.html()));
});
});