2022年8月16日 星期二

在網頁中顯示 HTML 原始碼的小工具 html2show

過去兩周在手刻 GitHub 架站教學網站過程中遇到一個很煩的問題, 就是要將 HTML 原始碼在網頁中呈現時, 除了要把 < 改成 &lt; 與把 > 改成 &gt; 外, 還要將空格改成 &nbsp; (這些都是 HTML 定義的實體 entity), 最後還要在最後面加上 <br> 跳行, 這些我都用 EditPlus 去操作, 雖然 EditPLUS 比記事本好用太多, 但還是覺得非常煩. 

我在網路上找到一個可以轉換實體的網頁, 但它只處理 < 與 > 而已, 空格與尾端添加跳行則無支援, 這樣實用性並不高 : 


今天複習了 jQuery 與 Javascript 語法後寫了一個符合自己需求的小工具 html2show :





只要將 HTML 原始碼複製貼到上面的文字框, 然後按 "轉換", 下方就會出現結果了, 按 "複製" 鈕即可複製結果到剪貼簿. 雖然來得晚了點, 但後續也許還用得到 (在 Blogger 貼網頁不須轉換, Blogger 會自動轉換, 但自己寫網頁就需要). 

這個網頁原始碼如下 : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>code2html</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <br>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="source">HTML 原始碼</label>
          <textarea id="source" name="source" class="form-control" rows="8"></textarea>
        </div>
      </form>
      <button id="trans" type="button" class="btn btn-primary">轉換</button>
      <button id="copy" type="button" class="btn btn-primary">複製</button>
      <form>
        <div class="form-group">        
          <label for="dest"></label>
          <textarea id="dest" name="dest" class="form-control" rows="8"></textarea>
        </div>
      </form>
    </div>
    <script>
      $(function(){
        $("#trans").on("click", function(e){
          var source=$("#source").val();
          var reg=/\S/g;   
          var arr=source.split("\n");
          for (var i in arr) {
            var idx=arr[i].search(reg);
            var nbsp="&nbsp;".repeat(idx);
            var str=arr[i].replace(/</g, "&lt;").replace(/>/g, "&gt;");
            arr[i]=nbsp + $.trim(str) + "<br>";
            }
          $("#dest").val(arr.join('\n'));
          });
        $("#copy").on("click", function(e){
          $("#dest")[0].select();
          document.execCommand("copy");
          alert("已複製到剪貼簿!");
          });
        });      
    </script>
  </body>
</html>

此網頁中的程式主要是讀取 HTML 原始碼後以跳行字元 \n 為界拆分每列為一個陣列, 然後在走訪此陣列的元素時, 先用正規表示法偵測每列最前面有幾個空格, 將第一個字元以前的空格用 &nbsp; 實體取代, 接著分別將 < 與 > 用 &lt; 與 &gt; 取代, 以及在列尾加上 <br>, 最後用 join() 將陣列組合回字串. 

這裡面用到了如下幾個技巧 :
  1. str.search(/\S/g) : 
    這會傳回字串 str 中第一個找不是空格的字元位置, 這可用來傳給 repeat() 方法來產生前面要幾個 &nbsp;. 
  2. str.repeat(n) :
    這會傳回字串 str 重複 n 後的結果字串, 例如 "&nbsp;".repeat(2) 會得到 "&nbsp;&nbsp;".
  3. $("#myid")[0] :
    這會傳回 id 為 myid 元素之 jQuery 物件的原始 DOM 物件, 有時候還是需要用到 DOM. 
  4. $.trim(str) :
    這會將字串 str 左右側的空格去除後傳回. 因為 Javascript 本身沒有 lstrip() 或 rstrip() 之類的字串方法, 所以 jQuery 的內建函數 $.trim() 就是個很好的彌補. 
  5. dom_obj.select() :
    這會選取該 DOM 物件. 
  6. document.execCommand("copy") :
    這會將所選擇的元素之內容複製到剪貼簿中. 
參考 : 

Why is document.execCommand("paste") not working in Google Chrome?

沒有留言 :