小蛙在實作 WebView 載入的網頁與 Android 互動時，一直都以手邊的 Nexus 7 2013 來做測試，直到所有功能都已就緒，有一天突然想起之前好像有看到 Javascript 在 2.3.x 會出現錯誤的問題，於是開了 2.3 版本的 emulator 來做測試，由於小蛙實作的部分是從 Javascript 呼叫某一個 function 來實作開啟行事曆的功能，這邊發生了大概類似下面的這種錯誤(小蛙的錯誤訊息已經洗掉了，以下內容來字參考資料1)

JNI WARNING: jarray 0xb5d256f0 points to non-array object (Ljava/lang/String;)
"WebViewCoreThread" prio=5 tid=8 NATIVE
  | group="main" sCount=0 dsCount=0 obj=0xb5cfc348 self=0x8234e98
  | sysTid=2023 nice=0 sched=0/0 cgrp=[fopen-error:2] handle=136531904
  at android.webkit.WebViewCore.nativeTouchUp(Native Method)
  at android.webkit.WebViewCore.nativeTouchUp(Native Method)
  at android.webkit.WebViewCore.access$3300(WebViewCore.java:53)
  at android.webkit.WebViewCore$EventHub$1.handleMessage(WebViewCore.java:1162)
  at android.os.Handler.dispatchMessage(Handler.java:99)
  at android.os.Looper.loop(Looper.java:130)
  at android.webkit.WebViewCore$WebCoreThread.run(WebViewCore.java:633)
  at java.lang.Thread.run(Thread.java:1019)
VM aborting

對於這個問題，參考資料1 的作者將 JavascriptInterface 整理成一個比較完整的 solution，不過因為教學文章「漏漏長」，所以小蛙後來沒有採用這個方案，雖然方案不同，不過解決這個問題的邏輯是差不多的。

小蛙後來使用了參考資料2的方法來解決，這邊大概記錄一下作法 (不知道怎麼讓 Android 與 Javascript 互通的話可參考「Android 與 WebView 中的 Javascript 相互溝通 @ 蛙齋」)：

檢查 Android 版本

設定參數來記錄 Android 版本是否為 2.3.x

private static JavaScriptInterface JSInterface;
// 設置 javascriptInterfaceBroken 來判斷是否為 2.3.x
private static boolean javascriptInterfaceBroken = false;
public static WebView wv;
try {
        if (Build.VERSION.RELEASE.contains("2.3.")) {
                javascriptInterfaceBroken = true;
        }
} catch (Exception e) { }
JSInterface = new JavaScriptInterface(getActivity());

依照版本設定對應動作

if(!javascriptInterfaceBroken){
    // 非 2.3.x 版本，正常執行
    wv.addJavascriptInterface(JSIterface, "JSInterface");
    ...
}else{
    // 2.3.x 版本
    wv.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView view, String url){
        super.onPageFinished(view, url);
        String handleGingerbreadStupidity =
                "javascript:function addToNotify(title, url, start, end) { window.location='http://JSInterface:addToNotify:'+(title)+'◎'+(url)+'◎'+(start)+'◎'+(end); }; "
                + "javascript: function handler() { this.addToNotify=addToNotify }; "
                + "javascript: var JSInterface = new handler();";
                view.loadUrl(handleGingerbreadStupidity);
        }
        @Override
        public boolean shouldOverrideUrlLoading(final WebView view, final String url) {
            if (url.contains("JSInterface:addToNotify")) {
                // 在這邊可用 regular expression 把剛剛組出來的 url 解回
                                // 須注意如果有中文的話，字串要先從 ISO-8859-1 轉回 UTF-8
                String nUrl = new String(url.getBytes("ISO-8859-1"), "UTF-8");
                String title = "title";
                String desc = "desc";
                String start = "start";
                String end = "end";
                try {
                    Method sMethod = JSInterface.getClass().getMethod("addToNotify", new Class[] { String.class, String.class, String.class, String.class });
                    sMethod.invoke(JSInterface, title, desc, start, end);
                } catch (SecurityException e) {
                    e.printStackTrace();
                } catch (NoSuchMethodException e) {
                    e.printStackTrace();
                } catch (IllegalArgumentException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                } catch (InvocationTargetException e) {
                    e.printStackTrace();
                }
            }
            return true;
        }
    });
}

上述程式碼中有幾個部份小蛙提出來記錄：

handleGingerbreadStupidity 字串中的 addToNotify 改成自己的方法名稱；JSInterface 改成自己的 JavaScriptInterface 名稱；後面參數有幾個都用「:」連接，因為小蛙的參數中有冒號會跟原本的冒號混淆，導致要拆出字串的時候很麻煩，因此這邊改成用「◎」來區隔。

shouldOverrideUrlLoading 會接收到從 onPageFinished 過來的 url，接著判斷如果包含剛剛我們自己組合的字串的話，就使用 reflection 的方式來呼叫對應方法。JSInterface.getClass().getMethod 中的 JSInterface 是開頭宣告的 JavaScriptInterface 的物件名稱，getMethod 第一個參數為呼叫的方法名稱，第二個參數是傳入的參數型別，都設定好之後就用 sMethod.invoke 呼叫該方法並傳入需要的物件及參數。

記錄的有點亂，小蛙當時卡在 onPagefinished 中傳參數的部分，因為內容包含了冒號導致發生一些問題；再來是 getMethod 方法不太會用，卡了一段時間 …

這篇文章 Android 2.3 @JavascriptInterface Issue 最早出現於 記下來。

• Android 呼叫 WebView 中的 Javascript

透過 Android 本身的按鈕來達到呼叫 Javascript 的功能很簡單，以小蛙的例子是用 fragment 中放置一個 WebView

上面的程式碼只寫出個大概，取得 WebView 後設定支援 Javascript，並且設定按鈕來執行 Javascript，上面例子小蛙 WebView 中有一個字體放大的 Javascript 叫做 fontSize(‘+’)，因此直接使用 wv.loadUrl(‘要呼叫的 Javascript’); 即可！

• 從 WebView 呼叫 Android Function

這個部分就比較複雜一些些，首先必須先建立一個 JavascriptInterface 物件，設定好要執行的相對應功能。例如：

這邊要注意的是如果 targetSdkVersion 設定為 17 以上，就必須在每個可以被 Javascript 呼叫的方法前面加上 @JavascriptInterface，否則會出現以下錯誤

將設定好的 JavaScriptInterface 設定給 WebView 物件

後面的參數名字可以自己取，小蛙這邊使用 JSInterface，這個名字是讓 Javascript 可以知道透過哪個物件來呼叫。Android 這邊完成後接著在 html 中加入相對應的動作，例如：

設定一個 button 讓使用者點選時執行 function showToast()，而 showToast 方法中倘若存在 JSInterface 物件 (這個物件是上面 wv.addJavascriptInterface 時設定的)，就執行 JSInterface.showToast() 的方法 (這一步就會對應到我們自訂的 JavaScriptInterface 類別中的 public void showToast())，在 app 中顯示 Toast 訊息。
到這邊，從 Android 呼叫 Javascript 以及從 Javascript 呼叫 Android 方法都已經完成，但是在 Android 2.3.x 版本中會發生一些錯誤，造成當機無法正確執行，解決方法請參考 Android 2.3 @JavascriptInterface Issue。

這篇文章 Android 與 WebView 中的 Javascript 相互溝通 最早出現於 記下來。

$(document).ready(function(){}});

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      alert($('#mydiv').text());
    </script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>

上面的例子執行後會發現，alert出來空白的東西，並不符合我們的預期，預期應該要印出mydiv的字樣。如果把alert包在$(function(){}});裡面試試

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(function(){alert($('#mydiv').text());});
    </script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>

就如同預期的印出 mydiv 字樣了！會造成這個結果的原因是，head部分的JS程式碼在整個網頁還沒完整載入前就已經先執行，因此找不到 mydiv 這個 DOM 元素，而將alert程式碼放在 $(function(){}); 之中，等到整個網頁元素載入完成後才執行，自然就可以找到 mydiv 這個元素而印出當中的值了。其實這部分應該算是JavaScript基礎班，小蛙真是覺得不太好意思。

附帶一提，小蛙為什麼有時候忘記加$(function(){});也還是可以正常執行呢？是因為小蛙習慣把JavaScript寫在網頁的最後，如果沒有”意外”的話，會是可以正常執行的(寫$(function(){});是好習慣！記下來吧！)。例如：

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>
<script type="text/javascript">
  alert($('#mydiv').text());
</script>

另外在 jQuery官網 中提到

All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

也就是說$(document).ready(function(){}); 可以縮寫成 $(function(){}});，這兩個是一樣的意思(既然一樣，為什麼不選短的來用呢 @@?)

更多內容可參考 jQuery 官網 或 此討論串。

這篇文章 jQuery $(document).ready() 最早出現於 記下來。

Javascript刷新頁面的幾種方法：
1   history.go(0)
2   location.reload()
3   location=location
4   location.assign(location)
5   document.execCommand(‘Refresh’)
6   window.navigate(location)
7   location.replace(location)
8   document.URL=location.href

上面的八種方法小蛙並沒有一個一個測試，只找了符合自己使用情況的方法，例如：小蛙有一個編輯頁面上有多選欄位、單選欄位、文字欄位 … 等，這些資料原本就已經有值了(從資料庫撈出來)，而有一個重填按鈕，點了之後將頁面設定為尚未編輯前的資料，也就是如果原本多選欄位選了五個，編輯時把全部取消勾選，後來發現想要恢復原始設定點了重填按鈕，希望可以回復原始資料(跟新增時的重填不同，新增時的重填只要清空即可)，好吧！這裡可能寫的有點複雜，總而言之最偷懶的方法就是讓頁面變成第一次載入時的狀況，於是小蛙直接用JavaScript的重新整理。
常看到的重新整理大概是location.reload();，但做了之後發現，原本被修改過的欄位並不會回復到原始狀況，就是說上面取消的五個多選欄位，並不會恢復成勾選狀態，之後試了location=location可以達到這個要求。有點像是F5(重新整理)跟Ctrl+F5(強制重新整理)的差別，location.reload();跟小蛙直接點F5一樣結果，而location=location的結果跟Ctrl+F5相同。
後來小蛙在《请问如何区别window.location.Reload()和window.location.href=window.location.href;》這個討論串中找到了為什麼location.reload();不能的答案

flyerwing :
定义和用法
reload() 方法用于重新加载当前文档。
语法
location.reload(force)说明
如果该 方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
好象是说:
如果window.loacation.reload(true)==window.location.href=”xxx.xx”;

馬上試了一下，果然把location.reload();改成location.reload(true);就可以了！

這篇文章 JavaScript 重新整理頁面 最早出現於 記下來。

• JavaScript列印頁面

JavaScript列印頁面非常簡單，只需要一行就可以達成，更多詳細資料可以參考Javascript呼叫IE列印以及預覽列印的方法@小峰峰的筆記本。

&lt;input type="button" onclick="<span style="color: #ff0000;"><strong>print()</strong></span>" value="列印申請表"&gt;

• JavaScript寄送電子郵件

JavaScript寄送電子郵件指令也非常簡單，但是隱藏的問題其實還蠻多的，小蛙先介紹寄送電子郵件的指令。

<input type="button" onclick="sendMail(true);" value="使用Big5寄送(Outlook)">
<input type="button" onclick="sendMail(false);" value="使用UTF-8寄送">

小蛙用了sendMail()來讓使用者自行選擇要用哪種方式寄送等等再說明原因。JavaScript程式碼寄信程式碼如下，因為小蛙只用到簡單的寄件人、主旨及內容，更多詳細設定請參閱用mailto寄信 @ 螞蟻的HTML：

<script type="text/javascript">
  // 基本寄信，沒有判斷編碼
  function sendMail(){
    var text_title = "這是一封透過JavsScript寄送的郵件主旨";
    var text_body  = "這是內文的部分。";
    sendmail = "mailto:xxxx@gmail.com?subject=" + text_title;
    sendmail += "&body=" + text_body;
    location.href = sendmail;
  }
</script>

如果要用到換行的話，必須使用%0A。這個範例可能有些人跑起來是OK的，有些人卻得到亂碼，接下來小蛙要記錄一下自己的做法，也許有更好的做法，但時間緊迫只好先用這種特殊方式來解決。

• JavaScript mailto 亂碼解決

目前小蛙找不到可以自動判斷要用什麼編碼的方法，也就是像上面的兩個按鈕，透過Big5寄送，或是透過UTF-8寄送，當小蛙以為就只有那麼簡單的時候又發現還要多一個條件判斷IE。Microsoft Outlook或Outlook Express會亂碼的原因是Outlook只能接受BIG5的編碼，但透過頁面location.href引導過去的參數會變成UTF-8，所以不管怎麼試只要編碼不是BIG5在Outlook就一定會出現亂碼，但又找不到方法可以判斷客戶端在點了按鈕之後所呼叫的是Outlook還是透過Webmail寄送，像小蛙的電腦點了之後會跳出瀏覽器，透過gmail送出郵件，而不是使用Outlook。

要確保送出的資料一定是用BIG5來編碼，在Java可以透過以下方式編碼。

java.net.URLEncoder.encode("一定要轉成BIG5編碼", "BIG5");

小蛙直接以自己的例子來說明，所有的頁面都是透過UTF-8編碼，包括使用者輸入的表單也是，這邊卡了一個問題是java.net.URLEncoder.encode()這個是Java的function，所以必須要在Server端才可以使用，也就是說使用者輸入完的資料沒有辦法直接透過java.net.URLEncoder.encode()來處理，這邊小蛙只好把所有的參數POST到另一頁sendMail.jsp專門處理亂碼及送出，以下是sendMail.jsp中Java編碼的部分。

String applyName = request.getParameter("applyName") == null ? "" : new String(request.getParameter("applyName").getBytes("ISO-8859-1"), "UTF-8");
String applyNameB = java.net.URLEncoder.encode("名稱："   + applyName).replaceAll("[+]", " ");

編碼邏輯部分如下(以下是小蛙的dirty code，JavaScript跟Java夾雜，硬要分還是可以分的開，要怎麼處理就看自己的規畫囉！)：

<script type="text/javascript">
  var text_title = "<%=title%>";
<%
  //也就是按下上面的「使用Big5寄送(Outlook)」
  if("true".equals(big5)){
%>
      // 這邊無論是哪個瀏覽器都務必要使用 <span style="color: #ff0000;"><strong>big5</strong></span> 送出
      text_title = "&lt;%=title<span style="color: #ff0000;"><strong>B</strong></span>%&gt;";
      text_body  = "%0A" + ("&lt;%=applyName<span style="color: #ff0000;"><strong>B</strong></span>%&gt;");
      ....
&lt;%
  }else{
      if("IE".equals(browser)){
%&gt;
          // 如果瀏覽器是IE，還要額外做encodeURI處理
          text_title = <strong><span style="color: #ff0000;">encodeURI</span></strong>(text_title);
          text_body  = "<span style="color: #ff0000;"><strong>%0A</strong></span>" + <strong><span style="color: #ff0000;">encodeURI</span></strong>("名稱：&lt;%=applyName%&gt;");
          ....
&lt;%
      }else{
%&gt;
          // Firefox, Chrome直接傳送即可
          text_title = (text_title);
          text_body  = "<span style="color: #ff0000;"><strong>%0A</strong></span>" + ("物件名稱：&lt;%=applyName%&gt;");
&lt;%
      }
  }
%&gt;
  mail_str = "mailto:xxxxx@gmail.com?subject=" + text_title;
  mail_str += "&amp;body=" + text_body;
  location.href = mail_str;
&lt;/script&gt;

好吧！還有時間的話再來看看要不要把這些Code清乾淨一些…天啊！Web工程師最怕看到的應該就是亂碼，每次一遇到亂碼問題就會卡一段時間 … 還是希望瀏覽器的行為模式可以統一呀！上面的方法可以「手動」解決亂碼問題，讓使用者自己點選是否透過Outlook或是透過Webmail傳送，而在瀏覽器的特殊行為上小蛙也做了判斷，最有問題的IE特別隔離出來，希望之後能看到更好的做法><。
這方法有一些不足的地方
(1)程式碼太醜，Java跟JavaScript全都混在一起(剛上面提到可以拆的開!!!)
(2)沒辦法做到完全自動判斷，還要讓使用者點選
(3)小蛙只測試了IE8, FF7.0.1, Chrome 16.0.912.63
(4)如果使用者預設瀏覽器是IE，而透過非IE瀏覽器去點選寄送mail，有些情況可以，有些情況不行，這個部份處理起來真的沒完沒了，真正遇到再說了 = =
打完收工，繼續處理其他工作，希望可以不要抱著工作跨年。

這篇文章 JavaScript列印頁面及mailto寄信亂碼 最早出現於 記下來。

$("a#example5").fancybox();

‘outside’樣式。

Photo Credit: Katie Harris

$("a#example6").fancybox({
    'titlePosition' : 'outside'
});

‘inside’樣式

Photo Credit: Katie Harris

$("a#example7").fancybox({
    'titlePosition' : 'inside'
});

‘Over’樣式

Photo Credit: Katie Harris

$("a#example8").fancybox({
    'titlePosition' : 'over'
});

小蛙採用最少量的修改來達到這個目的，畢竟動到FancyBox套件內部的話，到時候升級版本會非常麻煩。其實只要看一下FancyBox API就可以發現，FancyBox在標題列的部分是可以自行修改並且帶入html的。

$("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'inside',
    'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {
                          return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                      }
});

titleFormat的部分後面接了個function(title, currentArray, currentIndex, currentOpts){}，重點是處理完之後return的是'<span xxxx’，表示最後可以回傳html碼，簡單的說就是可以return希望呈現的元件。小蛙把return部分改成對方要求的「申請圖像授權」Button。

$("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'inside',
    <span style="color: #ff0000;"><strong>'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {</strong></span>
<span style="color: #ff0000;"><strong>                          return '&lt;center&gt;&lt;input type="button" name="title" value="申請圖像授權" onclick="xxx()"&gt;&lt;/center&gt;';</strong></span>
<span style="color: #ff0000;"><strong>                      }</strong></span>
});

可以增加html，當然也包括form元件，結果就變成這樣囉！

Photo Credit: Katie Harris

這篇文章 客製化FancyBox標題列，在FancyBox中加入Button 最早出現於 記下來。

<!-- 這邊很方便只要多載入 jquery 就可以使用 -->
<!-- 如果懶得自己下載就把這行貼上，使用google的 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- 套件主程式 -->
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<!-- 載入fancybox css -->
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

以上這些code都是放在<head> 放在這 </head>，另外有一些其他選項。

<!-- 如果要用滑鼠中間的滾輪控制圖片上下張，要新增這個 -->
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<!-- 如果要其他切換效果 -->
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>

接下來是建立點了會跳出燈箱的連結。

<!-- 這種是單一圖片的，href及src換成自己的圖片位置 -->
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
<!-- 這種是多張圖片的(gallery)，href及src換成自己的圖片位置 -->
<a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
<a rel="example_group" href="./example/12_b.jpg" title=""><img alt="" src="./example/12_s.jpg" /></a>
<a rel="example_group" href="./example/13_b.jpg" title=""><img alt="" src="./example/13_s.jpg" /></a>

要以Gallery(相簿)方式呈現，只要在<a>中加一個rel的屬性就可以了，rel全部設相同就會在同一個Gallery群組。這邊要注意的是如果有設定id屬性，千萬不可以有重複名稱！接下來到最後一個步驟了，呼叫fancybox()讓這些設定「活」起來。

// 讓單一圖片活起來
$("a#single_image").fancybox();
// 讓gallery活起來，titleFormat是圖片下方要呈現的樣式，可以自行修改
$("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'inside',
    'titleFormat'   :  function(title, currentArray, currentIndex, currentOpts) {
                           return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                       }
});

到這邊正常來說fancybox基本設定已經完成，只要點選圖片連結就可以看到燈箱效果，如果沒有出現的話，很高的機率都是js或是css的路徑設定錯誤。對於$()這個符號有興趣的網友可以參考jQuery Selectors。更多特效及客製化設定請參考fancybox#how to use，fancybox#API & Options，fancybox#Tips & Tricks。
之所以測試了那麼多種box，原因在於某個工作內容要取得的圖片是放在多媒體中心(數位典藏國家型科技計畫，由中央研究院資訊科學研究所建置)，而多媒體中心讀取圖片的方式是透過以下連結來取圖。

http://ndmmc2.iis.sinica.edu.tw/System/upload/GetImage.jsp?file_name=03-00001-0&type=6&user_name=taipei

這就遇到一個問題了，有很多box套件會先檢查<a href=”xxxxxx”>及<img src=”xxxxx”>這兩個圖片來源部份是不是以「圖片」副檔名做為結尾，過濾掉有問題的檔名，減少套件發生錯誤的機率，也就是說上面這條從多媒體中心讀取圖片的連結在某些套件下是讀不到圖片的(被套件預先過濾掉了，會被判定成taipei結尾，不符合圖片副檔名)，所以遇到遠端取圖卻無法出圖的時候，可以在連結最後面加一個參數&_=.jpeg目的只是在跳過套件的過濾。

http://ndmmc2.iis.sinica.edu.tw/System/upload/GetImage.jsp?file_name=03-00001-0&type=6&user_name=taipei&_=.jpeg

這篇文章 使用FancyBox燈箱效果呈現圖片，無法顯示圖片 最早出現於 記下來。

// 去除左邊空白
function lelftrim ( terms ) {
    return terms.replace ( /^[\s]*/gi, "" );
}

// 去除右邊空白
function righttrim ( terms ) {
    return terms.replace ( /[\s]*$/gi, "" );
}

// 去除左右空白
function trim ( terms ) {
    terms = lefttrim ( terms );
    terms = righttrim ( terms );
    return terms;
}

Regex 說明

/^[\s]*/gi
\s：會產生空白的字元，ex. ” “(空白)、”\t”、”\n”、”\x0B”、”\f”、”\r”
^[\s]：空白字元開頭的字串 (意思同於左邊有空白字元)
^[\s]*：0 個以上空白字元開頭的字串
g：global
i：case insensitive
/[\s]*$/gi
[\s]*$：0 個以上空白字元結尾的字串 (意思同於右邊有空白字元)
參考資料 Javascript function : trim() – 自訂
更多正則表示式可參考 Java Regular Expression的學習筆記 [精華] 很詳細唷！如果開發上都會直接使用 jQuery 的話，就直接使用 jQuery.trim(str) 方法就好囉！
參考資料：

1. jQuery.trim() @ jQuery
   http://api.jquery.com/jQuery.trim/
2. Java Regular Expression的學習筆記 [精華] @ JWorld@TW
   http://www.javaworld.com.tw/jute/post/view?bid=20&id=130126&sty=1&tpg=1&age=0
3. Javascript function : trim() – 自訂 @ Rox
   http://www.dotblogs.com.tw/rox/archive/2008/04/10/2753.aspx

這篇文章 Javascript用RegExp達成trim() 最早出現於 記下來。

function replaceAll ( terms, oldChar, newChar ) {
    terms.replace ( new RegExp ( oldChar , "gm" ), newChar );
}

參考資料自 JavaScript 中使用 replace 达到 replaceAll的效果 @ yueguangyuan

參數說明

terms：原始字串
oldChar：要被替換掉的字串
newChar：用來替換的新字串
g：global
m：multiline
另外一個部落格也有一個類似的做法

strings = strings.replace(/find/g,"replace");
// 例如："你好嗎?我很好".replace(/好/g, "Good")
// 會變成 你Good嗎?我很Good

參考資料：

1. JavaScript 中使用 replace 达到 replaceAll的效果 @ yueguangyuan
   http://yueguangyuan.iteye.com/blog/31744
2. jQuery: find and replace all the occurances from string @ Php Bugs
   http://phpbugs.wordpress.com/2011/06/16/jquery-find-and-replace-all-the-occurances-from-string/

這篇文章 Javascript用RegExp達成replaceAll() 最早出現於 記下來。