之前很喜歡用 HTML cafe 做簡單的 HTML 測試，但我覺得他輸入的底地方不好用，於是我打算自己用 Monaco Editor 實作自己的 HTML playground 可以在這裡玩玩看:D

前情提要

至於如何實作這個專案。簡單來說呢，我從 Monaco Editor 取得輸入的內容之後，將文字用 data url 的方式給 ifarme 的 src。

let demo = document.getElementById('demo')
demo.src = "data:text/html;charset=utf-8," + editor.getValue()

講到這有人就說，阿你後面的字串沒有進行url編碼阿... 確實，但一開始用還真沒問題，連中文也可以正常顯示，但卻為這次的問題留下了一顆未爆彈。

問題

我發現當我輸入有包含"#"這個字元後，後面的輸入似乎都被忽略。

一開始我以為是不是被某種語法註解掉了，於是開始看我的程式碼到底哪裡有問題。

直到我把 data url 輸出出來：

data:text/html;charset=utf-8,12#3456

哎呀，一切都明朗了。在 url 中如果加上 # 的話會將垂直高度訂位到那個元素。好比這串連結：

https://webpages.rlongdragon.com/practiseList.html#輸入字串處理與輸出

會直接定位到那個段落。

所以他把 # 後面的字串全部變成id了，當然就不是當作資料，所以某種方面來說，確實被註解了XD。

找到問題就好解決了阿，直接把字串查去編碼就行了對吧。對吧(?

事情沒有想像那麼簡單，如果你 google 搜尋 js encode url 你多半會查到 encodeURI/decodeURI 的用法。但encodeURI/decodeURI 不會編碼屬於URI語法的字元，所以還是編了個寂寞。

所以要用的是 encodeURIComponent/decodeURIComponents 來進行解編碼。