過去兩周在手刻 GitHub 架站教學網站過程中遇到一個很煩的問題, 就是要將 HTML 原始碼在網頁中呈現時, 除了要把 < 改成 < 與把 > 改成 > 外, 還要將空格改成 (這些都是 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=" ".repeat(idx);
var str=arr[i].replace(/</g, "<").replace(/>/g, ">");
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 為界拆分每列為一個陣列, 然後在走訪此陣列的元素時, 先用正規表示法偵測每列最前面有幾個空格, 將第一個字元以前的空格用 實體取代, 接著分別將 < 與 > 用 < 與 > 取代, 以及在列尾加上 <br>, 最後用 join() 將陣列組合回字串.
這裡面用到了如下幾個技巧 :
- str.search(/\S/g) :
這會傳回字串 str 中第一個找不是空格的字元位置, 這可用來傳給 repeat() 方法來產生前面要幾個 . - str.repeat(n) :
這會傳回字串 str 重複 n 後的結果字串, 例如 " ".repeat(2) 會得到 " ". - $("#myid")[0] :
這會傳回 id 為 myid 元素之 jQuery 物件的原始 DOM 物件, 有時候還是需要用到 DOM. - $.trim(str) :
這會將字串 str 左右側的空格去除後傳回. 因為 Javascript 本身沒有 lstrip() 或 rstrip() 之類的字串方法, 所以 jQuery 的內建函數 $.trim() 就是個很好的彌補. - dom_obj.select() :
這會選取該 DOM 物件. - document.execCommand("copy") :
這會將所選擇的元素之內容複製到剪貼簿中.
參考 :
沒有留言 :
張貼留言