[Javascript] 關於檢查字串的 HTML 是否符合規範 ( Check the HTML string for the unclosing tag )
最近剛好朋友問我一個問題，就是因為他在後台允許讓可以下 HTML Code 存入 Database
但是，有的客戶會放入</div> 或是 </p> 簡單的說就是一些沒有收尾，或是只有開頭的 HTML 標籤
這時候當插入在前端 render 的時候，會造成問題，簡單的說就是跑版。
因為那一段他是使用 SignalR 進行傳遞，所以他會拿到資料後 append 到 div 中 ，這時候有兩個思考點
如果使用 Server site 這一端先把 dom 進行檢查，這樣會造成機器上的壓力，所以思考點我們就改成用 javascript
1. 方法 1 - 檢查是不是都有關閉的tag
這是我檢查的字串
您好這是我的測試字串<div>ABCEF<br><a> FEGHI<img><br/></img><p>JKLMN</p></p> </div>結束結束
這裡面有問題的地方我標註出來了我多了一個 a 開頭無結尾，並且了一個 p 結尾無開頭
混和非純 HTML 的 HTML，如果是純 HTML 解決方法就很多了這邊就不贅述。
這方法我也不是原創，其實網路上面解決案例很多，但是這是我找到可以加入白名單的的部分，可以配合文字編輯器使用(因為你對文字編輯器不一定會開所有功能)
參考網址:https://stackoverflow.com/questions/19148178/javascript-library-function-to-find-unclosed-html-tags
但這有一個缺點 假設你得結構是 <div><a>xxx</div></a> 這種錯誤他就無法偵測到
2.方法 2 - 不如將他強制校正變成正確的，這方法很取巧，當您透過 AJAX 或是 WebSocket 拿到插入到你主網頁本體前，可以在 javascript 創造一個 div DOM
並且將程式碼插入後再拿取 innerHTML 就可以拿到一個被校正的 HTML Code.
先筆記到這邊， 因為碰到很有趣中間想過許多思路目前用方法 2
上面的測試字串
您好這是我的測試字串<div>ABCEF<br><a> FEGHI<img><br/></img><p>JKLMN</p></p> </div>結束結束
調整後會變成
您好這是我的測試字串<div>ABCEF<br><a> FEGHI<img><br><p>JKLMN</p><p> </p> </a></div><a>結束結束 </a>
黃色部分，是透過瀏覽器自己去校正，不過他只是補上讓他讓他符合結構，雖然不 如初衷，但是至少不會影響到你的主結構
如果您有更好的解決方案，可以跟我說 :)