[Javascript] 關於檢查字串的 HTML 是否符合規範 ( Check the HTML string for the unclosing tag )

2023-01-12

最近剛好朋友問我一個問題,就是因為他在後台允許讓可以下 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>


黃色部分,是透過瀏覽器自己去校正,不過他只是補上讓他讓他符合結構,雖然不 如初衷,但是至少不會影響到你的主結構

如果您有更好的解決方案,可以跟我說 :)


當麻許的超技八 2014 | Donma Hsu Design.