利用正則實現彩色控制台輸出

最近忙了一陣less的二次開發的工作，期間遇到了不少需要向控制台輸出彩色文字的需求。翻了下以前同事的**，發現要麼自己拼轉義字串，要麼使用一些不太好用的第三方庫，總之都不是很合自己的口味。按照自己的口味，乙個好的第三方庫應該滿足如下需求: 要支援豐富的顏色設定，同時設定顏色又不能太累贅，而且要支援console.log的萬用字元表示方法以減少拼字串的工作。cli-color和colors的語法類似，都是採用方法來設定字串顏色:

// colors
console.log("this is an error".error);
// cli-color 
console.log(clc.red('red') +
' plain '
+ clc.blue('blue'));

如果字串中的顏色比較多，而且字串中還包含動態資料，那麼就需要大量的拼字串的工作，醜陋且容易出錯，因此這種坑爹的方案直接忽略。

既然這些現成的庫不好用，乾脆就自己寫乙個。作為乙個前端平時自己接觸的最多的是html，受html語法的啟發，打算採用標籤的形式來設定字元顏色，而不是採用方法的形式。比如要輸出紅綠兩種顏色的文字，可以採用如下方式:foo.log('red color green color

')。這種方式有兩個優點：第一，便於表現豐富的顏色，尤其是顏色巢狀的情況，如果採用cli-color那種方式來表現多個顏色的巢狀，估計拼字串會讓你想吐；第二，省去了記憶方法名和拼字串。

那麼這種設計是否容易實現呢？在回答這個問題之前我們先簡單說一下實現彩色輸出的原理。向控制台輸出彩色文字主要利用了ansi 中的轉義字元（ansi轉義字元表）。眾多的轉義字元中有一部分是設定控制台的渲染方式的，其中輸出控制採用如下語法來宣告：\x1b[nm。x1b的值是27，在asc碼表中表示轉義字元，後面的[nm是模式設定，[和m是常量，n為變數。通過設定n的值可以實現不同的輸出設定，下面為常用的n值

需要特別注意的一點：過這些輸出設定不僅對本次輸出起效，而且將一直起效，直至遇到新的設定或控制台退出! 所以在使用的時候一定要記得重置顏色設定，免得影響後面的控制台輸出。我們通過下面的demo來檢驗下這些轉義字元的功能。注意劃紅線的語句部分，雖然這條語句中沒有對輸出進行任何設定，但因為上一條命令中設定了控制台顏色，所以這次輸出依然採用的上次的設定。

敘述了這麼多，終於可以回答上面的那個問題了：那麼這種設計是否容易實現呢？答案是：很簡單。我們僅僅需要用這則處理3類字串就可以了：轉義字元、顏色開始tag，顏色結束tag。處理策略也很簡單：

這部分的邏輯已經封並發布到了npm的rich-console模組，下面為具體的實現**和demo執行結果截圖。順便說一下ansi中支援的轉義內容還很多比如設定背景色、設定加粗、下劃線等，但這些支援的並不好，未能動物所下很多都不支援，再加上這些功能更用的比較少，因此這些功能被有意忽略了。

* 獲得帶顏色轉義字元的控制台輸出模板.

* @param tmpl 包含標籤的模板字串

* @param isbright 是否高亮，default false

* @return

* @public

*/function

getrichtmpl(tmpl, isbright)

var fontstyle = isbright =

=true ? '\u001b[1m' : '';

var escapes =

var no_color = escapes.nocolor;

var stylestack = ;

var reg =

newregexp((

'(\\\\.)'

// 由\表示的轉義字元

+'|'

// 樣式開始標籤

+'|'

// 樣式結束標籤

), 'g');

var handletag =

function(str)

// 若為不支援的顏色直接忽略，否則返回樣式開始字元並將樣式壓棧

if ($2) else

}

// 若為不支援的顏色直接忽略，否則從樣式棧中彈出當前樣式並返回

// 棧頂樣式，若棧為空返回系統預設樣式

if ($3) else

}// others

return m;

}) + no_color; // 最末尾的兩個重置用來防止使用者標籤不閉合進而汙染整個控制台輸出

};return

handletag(tmpl);

}/**

* 向控制台輸出彩色文字.

* @param cont

* @example

* showcolortext(

* '%s %s! ',

* 'hello',

* 'wold'

* );

* @public

*/function

output(cont)

var moreargs = .slice.call(arguments, 1);

moreargs.unshift(getrichtmpl(cont));

}/**

* 以紅色文字向控制台輸出錯誤資訊.

* @param cont

* @param

* @public

*/function

outputerror(cont)else

}module.exports =

利用正則實現彩色控制台輸出

C 控制台輸出彩色文字

控制台輸出控制

day27 控制台輸出彩色文字

利用正則實現彩色控制台輸出

C 控制台輸出彩色文字

控制台輸出控制

day27 控制台輸出彩色文字

相關推薦