【茶包射手日記】網頁空白符號複製貼上變問號

Syntax Highlighter是很多人在用的語法標記外掛，可以為網頁中的Html、C#、Java、PowerShell、Perl、PHP… 等各種語言加上行號及為關鍵字/註解/字串標上不同顏色，大幅提高可讀性。Syntax Highlighter的新版修改了程式碼複製貼上的寫法，標榜可以不再依賴Flash，只要在程式碼的所在位置點兩下，按下Ctrl-C，就可以把原始程式碼帶回家。

今天使用Chrome複製程式碼貼上NodePad++，發現一個狀況。以Syntax Highlighter首頁為例，在Demo區連點兩下選取程式碼內容後按Ctrl-C，用NotePad++新增一個空白文件按Ctrl-V貼上，出現以下結果:

// SyntaxHighlighter makes your code
// snippets beautiful without tiring
// your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
????this.length = 0;
????push.apply(this, elems);
????return this;
}

程式碼前置空白變成問號(?)!!

試了不同瀏覽器及不同文字編輯器的組合，觀察到以下結果:

1. 使用Chrome、Safari及Opera才會產生問號，IE、Firefox則不會。
2. 若改將複製內容貼在記事本(Notepad)或Word，也不會出現問號。
3. "?"是Unicode解碼失敗常見的結果，故試著將Notepad++的文件編碼由ANSI改成UTF-8，也可避免問題。

初步推論是Chrome、Safari、Opera等瀏覽器在複製時在存入Unicode，遇上文字編輯器使用ANSI解析剪貼簿的內容，導致解析失敗，抛出"?"收場。用中文編碼解析器分析，確認變成問號的部分是" "，一切有了合理解釋。

不過還是好奇追進了Syntax Highlighter的Source Code，發現原來不靠Flash的複雜做法是在背後建了一個隱藏的<textarea>，其中放入程式碼的文字內容，然後呼叫textarea.focus(); textarea.select(); 當使用者按下Ctrl-C時，就等同將<textarea>的內容複製到剪貼簿中。(真是巧妙的做法，立刻抄筆記...)

了解原理後，試做一個重現問題的快沖茶包:

$("body").html("&#160;&#160;&#160;<input type='text' value='&#160;&#160;&#160;' />");

有興趣的人可以用Chrome、Safari、Opera開啟Mini jQuery Lab玩看看，選取複製<input>的內容在Notepad++貼上會出現"???"。

而更好玩的一點: 我在<input>前方也放了三個&#160;，也可以複製貼上。但只有<input> Value中的空白在貼上時會變成問號，網頁內容中的&#160;貼上時則會被轉成空白(0x20)，默默將這點差異記在"跨瀏覽器求生手冊"裡。