前段時間做項目的時候,要使用富文本編輯器,採用的是wangEditor,結果當用戶在爲文本添加樣式的時候,發現居然無法直接保存,遂查看後臺數據。發現很多樣式都被過濾掉了,後臺接受的數據中根本沒有樣式。在網上瀏覽一番,發現主要是樣式標籤中 < 和 > 導致的,只要轉義和反轉義即可解決問題。
例如:要發送值後臺的文本爲text,則在傳入後臺時修改爲text.replace(/</g, "<").replace(/>/g, ">")。若要進行反轉義,則可以表示爲text.replace(/</g, "<").replace(/>/g, ">")。
另外,還發現當使用空格爲文本添加縮進時,會同樣出現無法保存樣式的問題,查看了後臺數據庫發現對於空格,其表示爲&nbsp;,想着也比較簡單,直接在原來的基礎上再次使用兩次replace()即可,即text.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/ /g, " "),但是在前端發現雖然文本中有空格,但是在html中無法直接顯示,當時我tm……後來想想,其實不需要最後一個replace()函數的,因爲瀏覽器在解析html文件時會自動將 解釋成空格的,即使用text.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&")即可。